@peektravel/app-utilities 0.2.3 → 0.2.5

package/dist/ui/index.cjs

@@ -159,6 +159,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);
@@ -1352,6 +1355,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");
@@ -1381,8 +1406,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",
@@ -1404,7 +1428,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 }));
   };
@@ -1424,6 +1447,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);
 
@@ -1455,6 +1498,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");
@@ -1484,8 +1549,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>` : "";
@@ -1502,7 +1566,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 }));
   };
@@ -1521,6 +1584,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);
 
@@ -1544,6 +1627,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");