@descope/web-components-ui 3.13.1 → 3.13.3

package/dist/index.esm.js

@@ -11463,6 +11463,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$c {
   }
 
   set value(val) {
+    this.#onValueChange(val);
+  }
+
+  // Handles programmatic value changes only (e.g. `component.value = '...'`).
+  // User edits of the inner inputs are handled by #onTextFieldChange /
+  // #onComboBoxChange — Vaadin's value write-back is disabled in PhoneFieldClass
+  // so it no longer routes inner edits through this setter.
+  #onValueChange(val) {
     // reject empty or digit-free values
     if (!val || !/\d/.test(val)) {
       this.#clearValue();
@@ -11595,22 +11603,37 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$c {
   }
 
   #initInputs() {
-    // Sanitize phone input value to filter everything but digits
-    this.textField.addEventListener('input', (e) => {
-      if (!this.allowAlphanumericInput) {
-        const telDigitsRegExp = /^\d$/;
-        const sanitizedInput = e.target.value
-          .split('')
-          .filter((char) => telDigitsRegExp.test(char))
-          .join('');
-        e.target.value = sanitizedInput;
-      }
-    });
+    // Handle each inner input on its own: the phone field updates the national
+    // number, the combo box updates the country/dial code. Neither rewrites the
+    // other, so editing one input never clears the other.
+    this.textField.addEventListener('input', this.#onTextFieldChange.bind(this));
+    this.comboBox.addEventListener('change', this.#onComboBoxChange.bind(this));
 
     this.handleFocusEventsDispatching(this.inputs);
     this.handleInputEventDispatching();
   }
 
+  // user edited the phone number: sanitize and (optionally) format it, leaving
+  // the country code untouched
+  #onTextFieldChange() {
+    const sanitized = this.allowAlphanumericInput
+      ? this.textField.value
+      : this.textField.value.replace(/\D+/g, '');
+
+    this.textField.value = this.isFormatValue ? this.#formatNationalNumber(sanitized) : sanitized;
+  }
+
+  // user changed the country: re-format the existing national number for the
+  // new country, leaving the phone number digits untouched
+  #onComboBoxChange() {
+    if (!this.isFormatValue) {
+      return;
+    }
+
+    const nationalNumber = this.textField.value.replace(/\D+/g, '');
+    this.textField.value = this.#formatNationalNumber(nationalNumber);
+  }
+
   #formatNationalNumber(nationalNumber = '') {
     // re-initialize AsYouType if country code is outdated
     if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {
@@ -11737,6 +11760,12 @@ const customMixin$b = (superclass) =>
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
+      // On every input, Vaadin writes its value back into the input element,
+      // which re-runs the internal `value` setter and overwrites the combo box
+      // and phone fields. PhoneFieldInternal manages those inputs itself, so
+      // disable Vaadin's write-back.
+      this.baseElement._forwardInputValue = () => {};
+
       this.inputElement = this.shadowRoot.querySelector(componentName$14);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
@@ -25606,6 +25635,11 @@ class RawTooltip extends createBaseClass$1({
   componentName: componentName$9,
   baseSelector: 'vaadin-tooltip',
 }) {
+  // Observes the inner descope-anchored's `class` attribute so runtime updates
+  // (e.g. real-time conditional components toggling `.hidden`) keep this
+  // tooltip's class in sync. Set up in connectedCallback so reconnects work.
+  #anchoredClassObserver = null;
+
   constructor() {
     super();
 
@@ -25721,9 +25755,31 @@ class RawTooltip extends createBaseClass$1({
     );
     this.#setTooltipTarget();
 
+    setTimeout(() => this.#onOverlayReady());
+  }
+
+  #observeAnchored() {
+    this.#anchoredClassObserver?.disconnect();
+    if (this.anchored) {
+      this.#anchoredClassObserver = observeAttributes$1(
+        this.anchored,
+        () => this.#syncComponentState(),
+        { includeAttrs: ['class'] },
+      );
+    }
+  }
+
+  // createBaseClass gates init() to first-connect, so observing here is
+  // required for the detach/reattach cycle to keep working.
+  connectedCallback() {
+    super.connectedCallback?.();
     this.#syncComponentState();
+    this.#observeAnchored();
+  }
 
-    setTimeout(() => this.#onOverlayReady());
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+    this.#anchoredClassObserver?.disconnect();
   }
 
   #setTooltipTarget() {
@@ -27015,6 +27071,12 @@ class RawAttachment extends createBaseClass$1({
   componentName: componentName$6,
   baseSelector: 'descope-anchored',
 }) {
+  // Observes the inner descope-anchored's `class` attribute so runtime
+  // updates (e.g. real-time conditional components toggling `.hidden`) keep
+  // this attachment host's class in sync. Set up in connectedCallback so
+  // reconnects work (createBaseClass gates init() to first connect only).
+  #anchoredClassObserver = null;
+
   constructor() {
     super();
 
@@ -27053,8 +27115,6 @@ class RawAttachment extends createBaseClass$1({
   init() {
     super.init?.();
 
-    this.#syncComponentState();
-
     injectStyle(
       `
       :host {
@@ -27105,6 +27165,30 @@ class RawAttachment extends createBaseClass$1({
     this.classList.toggle('hidden', hasHidden);
   }
 
+  #observeAnchored() {
+    this.#anchoredClassObserver?.disconnect();
+    if (this.anchored) {
+      this.#anchoredClassObserver = observeAttributes$1(
+        this.anchored,
+        () => this.#syncComponentState(),
+        { includeAttrs: ['class'] },
+      );
+    }
+  }
+
+  // createBaseClass gates init() to first-connect, so observing here is
+  // required for the detach/reattach cycle to keep working.
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.#syncComponentState();
+    this.#observeAnchored();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+    this.#anchoredClassObserver?.disconnect();
+  }
+
   #syncAvailableSizeAttr() {
     const anchor = this.defaultSlot?.assignedElements()?.[0];
 
@@ -31777,6 +31861,11 @@ class RawAnchored extends createBaseClass$1({
 
   #hostStretchSheet = null;
 
+  // Observes the anchor's `class` attribute so runtime updates by the SDK
+  // (e.g. real-time conditional components toggling `.hidden`) propagate to
+  // this element. Without this, only the initial slotchange would sync.
+  #anchorClassObserver = null;
+
   get #anchor() {
     return this.defaultSlot.assignedElements({ flatten: true })[0];
   }
@@ -31879,6 +31968,28 @@ class RawAnchored extends createBaseClass$1({
       this.#anchored,
       'st-host-direction',
     );
+
+    this.#observeAnchorClass();
+  }
+
+  #observeAnchorClass() {
+    this.#anchorClassObserver?.disconnect();
+    if (this.#anchor) {
+      this.#anchorClassObserver = observeAttributes$1(
+        this.#anchor,
+        () => this.#syncComponentState(),
+        { includeAttrs: ['class'] },
+      );
+    }
+  }
+
+  // createBaseClass gates init() to first-connect (#isInit). Without
+  // re-observing here, runtime `.hidden` toggles stop syncing after a
+  // detach/reattach cycle.
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.#observeAnchorClass();
+    this.#syncComponentState();
   }
 
   // Injects [stretch] layout rules into the containing component's shadow root (e.g. descope-attachment)
@@ -31920,6 +32031,7 @@ class RawAnchored extends createBaseClass$1({
     super.disconnectedCallback?.();
     this.#stretchObserver?.disconnect();
     this.#directionObserver?.disconnect();
+    this.#anchorClassObserver?.disconnect();
   }
 
   // Track whether anything is slotted, so the host display rule can hide an