@peektravel/app-utilities 0.2.4 → 0.2.6

package/dist/ui/index.d.cts

@@ -665,6 +665,13 @@ declare class OdyInput extends OdyElement {
     /** Current field value. */
     get value(): string;
     set value(next: string);
+    /**
+     * Reflect `value` into the live control in place — the native field already
+     * shows what the user typed, so rebuilding it (as a full re-render would)
+     * needlessly drops focus and caret. Every other observed attribute changes
+     * the chrome and still re-renders via the base implementation.
+     */
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
     protected render(): void;
 }
 
@@ -686,6 +693,13 @@ declare class OdyInlineInput extends OdyElement {
     /** Current field value. */
     get value(): string;
     set value(next: string);
+    /**
+     * Reflect `value` into the live control in place — the native field already
+     * shows what the user typed, so rebuilding it (as a full re-render would)
+     * needlessly drops focus and caret. Every other observed attribute changes
+     * the chrome and still re-renders via the base implementation.
+     */
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
     protected render(): void;
 }
 
@@ -711,6 +725,13 @@ declare class OdySearchInput extends OdyElement {
     /** Current field value. */
     get value(): string;
     set value(next: string);
+    /**
+     * Reflect `value` into the live control in place — the native field already
+     * shows what the user typed, so rebuilding it (as a full re-render would)
+     * needlessly drops focus, caret and the `--focused` state. Every other
+     * observed attribute changes the chrome and still re-renders via the base.
+     */
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
     protected render(): void;
 }
 
@@ -918,9 +939,15 @@ declare class OdyTabs extends OdyElement {
 }
 
 /**
- * `<ody-copy-button>` — a button that copies its `value` to the clipboard via
- * `navigator.clipboard.writeText`, showing a transient success (or error) state.
- * Dispatches a `copy` CustomEvent with `{ value, ok }`.
+ * `<ody-copy-button>` — a button that copies its `value` to the clipboard,
+ * showing a transient success (or error) state. Dispatches a `copy`
+ * CustomEvent with `{ value, ok }`.
+ *
+ * The copy uses a synchronous `document.execCommand('copy')` as the source of
+ * truth so it works inside cross-origin iframes (where the async Clipboard API
+ * is blocked by default) and legacy contexts. The async
+ * `navigator.clipboard.writeText` is used only as a best-effort enhancement
+ * when the synchronous path can't run.
  *
  * Attributes:
  * - `value` — the text copied to the clipboard.

package/dist/ui/index.d.ts

@@ -665,6 +665,13 @@ declare class OdyInput extends OdyElement {
     /** Current field value. */
     get value(): string;
     set value(next: string);
+    /**
+     * Reflect `value` into the live control in place — the native field already
+     * shows what the user typed, so rebuilding it (as a full re-render would)
+     * needlessly drops focus and caret. Every other observed attribute changes
+     * the chrome and still re-renders via the base implementation.
+     */
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
     protected render(): void;
 }
 
@@ -686,6 +693,13 @@ declare class OdyInlineInput extends OdyElement {
     /** Current field value. */
     get value(): string;
     set value(next: string);
+    /**
+     * Reflect `value` into the live control in place — the native field already
+     * shows what the user typed, so rebuilding it (as a full re-render would)
+     * needlessly drops focus and caret. Every other observed attribute changes
+     * the chrome and still re-renders via the base implementation.
+     */
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
     protected render(): void;
 }
 
@@ -711,6 +725,13 @@ declare class OdySearchInput extends OdyElement {
     /** Current field value. */
     get value(): string;
     set value(next: string);
+    /**
+     * Reflect `value` into the live control in place — the native field already
+     * shows what the user typed, so rebuilding it (as a full re-render would)
+     * needlessly drops focus, caret and the `--focused` state. Every other
+     * observed attribute changes the chrome and still re-renders via the base.
+     */
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
     protected render(): void;
 }
 
@@ -918,9 +939,15 @@ declare class OdyTabs extends OdyElement {
 }
 
 /**
- * `<ody-copy-button>` — a button that copies its `value` to the clipboard via
- * `navigator.clipboard.writeText`, showing a transient success (or error) state.
- * Dispatches a `copy` CustomEvent with `{ value, ok }`.
+ * `<ody-copy-button>` — a button that copies its `value` to the clipboard,
+ * showing a transient success (or error) state. Dispatches a `copy`
+ * CustomEvent with `{ value, ok }`.
+ *
+ * The copy uses a synchronous `document.execCommand('copy')` as the source of
+ * truth so it works inside cross-origin iframes (where the async Clipboard API
+ * is blocked by default) and legacy contexts. The async
+ * `navigator.clipboard.writeText` is used only as a best-effort enhancement
+ * when the synchronous path can't run.
  *
  * Attributes:
  * - `value` — the text copied to the clipboard.

package/dist/ui/index.js

@@ -157,6 +157,9 @@ function escapeHtml(value) {
 function classes(...parts) {
   return parts.filter(Boolean).join(" ");
 }
+function reflectControlValue(control, value) {
+  if (control && control.value !== value) control.value = value;
+}
 function define(tag, ctor) {
   if (typeof customElements === "undefined") return;
   if (!customElements.get(tag)) customElements.define(tag, ctor);
@@ -1350,6 +1353,28 @@ var OdyInput = class extends OdyElement {
     this.#value = next;
     this.setAttribute("value", next);
   }
+  /**
+   * Reflect `value` into the live control in place — the native field already
+   * shows what the user typed, so rebuilding it (as a full re-render would)
+   * needlessly drops focus and caret. Every other observed attribute changes
+   * the chrome and still re-renders via the base implementation.
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "value") {
+      if (oldValue === newValue) return;
+      const value = newValue ?? "";
+      reflectControlValue(
+        this.querySelector(
+          ".ody-input__field, .ody-input__textarea"
+        ),
+        value
+      );
+      this.#syncCounter(value);
+      this.#syncClearButton(value);
+      return;
+    }
+    super.attributeChangedCallback();
+  }
   render() {
     const size = this.attr("size", "base");
     const isTextarea = this.flag("textarea");
@@ -1379,8 +1404,7 @@ var OdyInput = class extends OdyElement {
       `ody-input__container--${size}`
     );
     const field = isTextarea ? `<textarea class="ody-input__textarea" rows="3"${maxlengthAttr}${isReadonly ? " readonly" : ""}${isDisabled ? " disabled" : ""}>${this.esc(value)}</textarea>` : `<input class="ody-input__field" type="text" value="${this.esc(value)}" placeholder="${this.esc(this.attr("placeholder"))}"${maxlengthAttr}${isReadonly ? " readonly" : ""}${isDisabled ? " disabled" : ""} />`;
-    const clearEnabled = !this.flag("no-clear") && !isDisabled && !isReadonly && value !== "";
-    const clearEl = clearEnabled ? `<button type="button" class="btn ody-input__clear-button" aria-label="${this.localized("clear-label", "clear")}">${iconSvg("close", "icon__svg clear-icon")}</button>` : "";
+    const clearEl = this.#clearEnabled(value) ? this.#clearButtonHtml() : "";
     const showCounter = !isReadonly && !isDisabled && maxlength !== "";
     const messages = classes(
       caption && "has-caption",
@@ -1402,7 +1426,6 @@ var OdyInput = class extends OdyElement {
   #onInput = (event) => {
     event.stopPropagation();
     const value = event.target.value;
-    this.#syncCounter(value);
     this.value = value;
     this.dispatchEvent(new CustomEvent("input", { detail: { value }, bubbles: true }));
   };
@@ -1422,6 +1445,26 @@ var OdyInput = class extends OdyElement {
     const max = this.attr("maxlength");
     if (counter && max) counter.textContent = `${value.length} / ${max}`;
   }
+  /** Whether the clear button should be shown for the given value. */
+  #clearEnabled(value) {
+    return !this.flag("no-clear") && !this.flag("disabled") && !this.flag("readonly") && value !== "";
+  }
+  /** Markup for the clear button (shared by render and the in-place sync). */
+  #clearButtonHtml() {
+    return `<button type="button" class="btn ody-input__clear-button" aria-label="${this.localized("clear-label", "clear")}">${iconSvg("close", "icon__svg clear-icon")}</button>`;
+  }
+  /** Add or remove the clear button in place as the value gains/loses content. */
+  #syncClearButton(value) {
+    const existing = this.querySelector(".ody-input__clear-button");
+    if (this.#clearEnabled(value)) {
+      if (existing) return;
+      const control = this.querySelector(".ody-input__field, .ody-input__textarea");
+      control?.insertAdjacentHTML("afterend", this.#clearButtonHtml());
+      this.querySelector(".ody-input__clear-button")?.addEventListener("click", this.#onClear);
+    } else {
+      existing?.remove();
+    }
+  }
 };
 define("ody-input", OdyInput);
 
@@ -1453,6 +1496,28 @@ var OdyInlineInput = class extends OdyElement {
     this.#value = next;
     this.setAttribute("value", next);
   }
+  /**
+   * Reflect `value` into the live control in place — the native field already
+   * shows what the user typed, so rebuilding it (as a full re-render would)
+   * needlessly drops focus and caret. Every other observed attribute changes
+   * the chrome and still re-renders via the base implementation.
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "value") {
+      if (oldValue === newValue) return;
+      const value = newValue ?? "";
+      reflectControlValue(
+        this.querySelector(
+          ".ody-inline-input__field, .ody-inline-input__textarea"
+        ),
+        value
+      );
+      this.#syncCounter(value);
+      this.#syncClearButton(value);
+      return;
+    }
+    super.attributeChangedCallback();
+  }
   render() {
     const size = this.attr("size", "base");
     const isTextarea = this.flag("textarea");
@@ -1482,8 +1547,7 @@ var OdyInlineInput = class extends OdyElement {
       `ody-inline-input__group--${size}`
     );
     const field = isTextarea ? `<textarea class="ody-inline-input__textarea" rows="3"${maxlengthAttr}${isReadonly ? " readonly" : ""}${isDisabled ? " disabled" : ""}>${this.esc(value)}</textarea>` : `<input class="ody-inline-input__field" type="text" value="${this.esc(value)}" placeholder="${this.esc(this.attr("placeholder"))}"${maxlengthAttr}${isReadonly ? " readonly" : ""}${isDisabled ? " disabled" : ""} />`;
-    const clearEnabled = !this.flag("no-clear") && !isDisabled && !isReadonly && value !== "";
-    const clearEl = clearEnabled ? `<button type="button" class="btn ody-inline-input__clear-button" aria-label="${this.localized("clear-label", "clear")}">${iconSvg("close", "icon__svg clear-icon")}</button>` : "";
+    const clearEl = this.#clearEnabled(value) ? this.#clearButtonHtml() : "";
     const showCounter = !isReadonly && !isDisabled && maxlength !== "";
     const footerNeeded = showCounter || caption !== "" || warning !== "" || info !== "";
     const footer = footerNeeded ? `<div class="ody-inline-input-footer"><div class="ody-inline-input-footer__message">` + (caption ? `<span class="ody-inline-input-footer__message__caption">${this.esc(caption)}</span>` : "") + (warning ? `<span class="ody-inline-input-footer__message__warning">${this.esc(warning)}</span>` : "") + (info ? `<span class="ody-inline-input-footer__message__info">${this.esc(info)}</span>` : "") + `</div>` + (showCounter ? `<div class="ody-inline-input-footer__length-message">${value.length} / ${this.esc(maxlength)}</div>` : "") + `</div>` : "";
@@ -1500,7 +1564,6 @@ var OdyInlineInput = class extends OdyElement {
   #onInput = (event) => {
     event.stopPropagation();
     const value = event.target.value;
-    this.#syncCounter(value);
     this.value = value;
     this.dispatchEvent(new CustomEvent("input", { detail: { value }, bubbles: true }));
   };
@@ -1519,6 +1582,26 @@ var OdyInlineInput = class extends OdyElement {
     const max = this.attr("maxlength");
     if (counter && max) counter.textContent = `${value.length} / ${max}`;
   }
+  /** Whether the clear button should be shown for the given value. */
+  #clearEnabled(value) {
+    return !this.flag("no-clear") && !this.flag("disabled") && !this.flag("readonly") && value !== "";
+  }
+  /** Markup for the clear button (shared by render and the in-place sync). */
+  #clearButtonHtml() {
+    return `<button type="button" class="btn ody-inline-input__clear-button" aria-label="${this.localized("clear-label", "clear")}">${iconSvg("close", "icon__svg clear-icon")}</button>`;
+  }
+  /** Add or remove the clear button in place as the value gains/loses content. */
+  #syncClearButton(value) {
+    const existing = this.querySelector(".ody-inline-input__clear-button");
+    if (this.#clearEnabled(value)) {
+      if (existing) return;
+      const control = this.querySelector(".ody-inline-input__field, .ody-inline-input__textarea");
+      control?.insertAdjacentHTML("afterend", this.#clearButtonHtml());
+      this.querySelector(".ody-inline-input__clear-button")?.addEventListener("click", this.#onClear);
+    } else {
+      existing?.remove();
+    }
+  }
 };
 define("ody-inline-input", OdyInlineInput);
 
@@ -1542,6 +1625,20 @@ var OdySearchInput = class extends OdyElement {
     this.#value = next;
     this.setAttribute("value", next);
   }
+  /**
+   * Reflect `value` into the live control in place — the native field already
+   * shows what the user typed, so rebuilding it (as a full re-render would)
+   * needlessly drops focus, caret and the `--focused` state. Every other
+   * observed attribute changes the chrome and still re-renders via the base.
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "value") {
+      if (oldValue === newValue) return;
+      reflectControlValue(this.querySelector(".ody-input__field"), newValue ?? "");
+      return;
+    }
+    super.attributeChangedCallback();
+  }
   render() {
     const size = this.attr("size", "base");
     const isDisabled = this.flag("disabled");
@@ -2052,16 +2149,47 @@ var OdyCopyButton = class extends OdyElement {
   }
   #onClick = () => {
     const value = this.attr("value");
-    const clipboard = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
-    if (!clipboard || typeof clipboard.writeText !== "function") {
-      this.#feedback("error", value);
-      return;
+    const ok = this.#execCopy(value);
+    if (!ok) {
+      const clipboard = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
+      if (clipboard && typeof clipboard.writeText === "function") {
+        void clipboard.writeText(value).then(
+          () => void 0,
+          () => void 0
+        );
+      }
     }
-    void clipboard.writeText(value).then(
-      () => this.#feedback("success", value),
-      () => this.#feedback("error", value)
-    );
+    this.#feedback(ok ? "success" : "error", value);
   };
+  /**
+   * Synchronous clipboard write. Must be called within the user-gesture window
+   * (i.e. directly from the click handler, not from an async continuation).
+   * Works in cross-origin iframes and legacy contexts where the async Clipboard
+   * API is unavailable or blocked.
+   */
+  #execCopy(value) {
+    if (!value || typeof document === "undefined") return false;
+    const el = document.createElement("textarea");
+    el.value = value;
+    el.setAttribute("readonly", "");
+    el.style.position = "fixed";
+    el.style.top = "0";
+    el.style.left = "0";
+    el.style.opacity = "0";
+    document.body.appendChild(el);
+    el.select();
+    try {
+      el.setSelectionRange(0, value.length);
+    } catch {
+    }
+    let ok = false;
+    try {
+      ok = document.execCommand("copy");
+    } catch {
+    }
+    document.body.removeChild(el);
+    return ok;
+  }
   #feedback(state, value) {
     this.#state = state;
     this.render();