@descope/web-components-ui 1.43.0 → 1.45.0

package/dist/index.esm.js

@@ -15,7 +15,7 @@ import '@vaadin/number-field';
 import '@vaadin/password-field';
 import MarkdownIt from 'markdown-it';
 import '@vaadin/text-area';
-import { parsePhoneNumberFromString } from 'libphonenumber-js/min';
+import parsePhoneNumberFromString$1, { parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js/min';
 import '@vaadin/grid';
 import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
 import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
@@ -2244,6 +2244,19 @@ const externalInputMixin =
       }
     };
 
+const inputOverrideValidConstraintsMixin = (superclass) =>
+  class InputOverrideValidConstraintsMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      // vaadin uses `validConstraints` (required, pattern, minlength, maxlength) to determine if it should validate
+      // the input or not. We want to override this behavior, so we can enforce validation even if these attributes are not present.
+      if (this.baseElement._hasValidConstraints) {
+        this.baseElement._hasValidConstraints = () => true;
+      }
+    }
+  };
+
 const createBaseInputClass$1 = (...args) =>
   compose$1(
     inputValidationMixin$1,
@@ -8163,6 +8176,7 @@ const PasscodeClass = compose$1(
     },
   }),
   draggableMixin$1,
+  inputOverrideValidConstraintsMixin,
   composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin$1,
   customMixin$c
@@ -10210,7 +10224,7 @@ const parsePhoneNumber = (val) => {
 
 const componentName$P = getComponentName$1('phone-field-internal');
 
-const commonAttrs$1 = ['disabled', 'size', 'bordered', 'readonly', 'allow-alphanumeric-input'];
+const commonAttrs$1 = ['disabled', 'size', 'bordered', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
 const phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];
 const labelTypeAttrs = ['label-type', 'country-input-label', 'label'];
@@ -10229,6 +10243,8 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$8 {
     return [].concat(BaseInputClass$8.observedAttributes || [], inputRelatedAttrs$1);
   }
 
+  #ayt;
+
   constructor() {
     super();
 
@@ -10245,200 +10261,329 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$8 {
     </div>
     `;
 
-    this.countryCodeInput = this.querySelector('descope-combo-box');
-    this.phoneNumberInput = this.querySelector('descope-text-field');
-    this.inputs = [this.countryCodeInput, this.phoneNumberInput];
+    this.comboBox = this.querySelector('descope-combo-box');
+    this.textField = this.querySelector('descope-text-field');
 
-    forwardAttrs$1(this, this.countryCodeInput, { includeAttrs: ['label-type'] });
-    forwardAttrs$1(this, this.phoneNumberInput, { includeAttrs: ['label-type', 'required'] });
+    this.inputs = [this.comboBox, this.textField];
+
+    forwardAttrs$1(this, this.comboBox, { includeAttrs: ['label-type'] });
+    forwardAttrs$1(this, this.textField, { includeAttrs: ['label-type', 'required'] });
 
     // override combo box setter to display dialCode value in input
-    this.countryCodeInput.customValueTransformFn = (val) => {
+    this.comboBox.customValueTransformFn = (val) => {
       const [, dialCode] = val?.split?.(' ') || [];
       return dialCode;
     };
   }
 
+  // exposed from main component
   get countryCodeInputData() {
-    return this.countryCodeInput.items;
+    return this.comboBox.items;
+  }
+
+  // exposed from main component
+  get countryCodeValue() {
+    return this.comboBox.shadowRoot.querySelector('input').value;
+  }
+
+  // exposed from main component
+  get phoneNumberInputEle() {
+    return this.textField.shadowRoot.querySelector('input');
   }
 
   get allowAlphanumericInput() {
     return this.getAttribute('allow-alphanumeric-input') === 'true';
   }
 
-  get value() {
-    if (!this.phoneNumberValue) {
-      return '';
-    }
-    return `${this.countryCodeInput.value}-${this.phoneNumberInput.value}`;
+  get defaultCode() {
+    return this.getAttribute('default-code');
   }
 
-  set value(val) {
-    const [countryCode, phoneNumber] = parsePhoneNumber(val);
+  get selectionStart() {
+    return this.textField.selectionStart;
+  }
 
-    this.#setCountryCode(countryCode);
-    this.#setPhoneNumber(phoneNumber);
+  get minLength() {
+    return parseInt(this.getAttribute('minlength'), 10) || 0;
   }
 
-  setSelectionRange(...args) {
-    this.phoneNumberInput.setSelectionRange(...args);
+  get selectedCountryCode() {
+    return this.comboBox?.selectedItem?.getAttribute('data-country-code');
   }
 
-  get selectionStart() {
-    return this.phoneNumberInput.selectionStart;
+  get restrictCountries() {
+    const attr = this.getAttribute('restrict-countries');
+    return attr?.split(',').filter(Boolean) || [];
   }
 
-  #setCountryCode(val) {
-    if (val) {
-      const countryCodeItem = this.getCountryByDialCode(val);
-      if (countryCodeItem) {
-        this.countryCodeInput.selectedItem = countryCodeItem;
-      }
-    } else {
-      this.countryCodeInput.selectedItem = undefined;
-    }
+  get isFormatValue() {
+    return this.getAttribute('format-value') === 'true';
   }
 
-  #setPhoneNumber(val) {
-    if (this.phoneNumberInput.value === val) {
-      return;
+  // `strict validation` enforces value parsing with libphonenumber-js
+  get isStrictValidation() {
+    return this.getAttribute('strict-validation') === 'true';
+  }
+
+  get value() {
+    if (!this.comboBox.value || !this.textField.value) {
+      return '';
     }
 
-    this.phoneNumberInput.value = val;
-  }
+    const [countryCode, phoneNumber] = parsePhoneNumber(
+      `${this.comboBox.value}-${this.textField.value}`
+    );
 
-  get phoneNumberValue() {
-    return this.phoneNumberInput.value;
+    return `${countryCode || this.comboBox.value}-${phoneNumber || this.textField.value}`;
   }
 
-  get countryCodeValue() {
-    return this.countryCodeInput.shadowRoot.querySelector('input').value;
-  }
+  set value(val) {
+    const [countryCode, nationalNumber] = parsePhoneNumber(val);
 
-  get phoneNumberInputEle() {
-    return this.phoneNumberInput.shadowRoot.querySelector('input');
+    this.#setCountryCode(countryCode);
+    this.#setNationalNumber(nationalNumber);
   }
 
-  get minLength() {
-    return parseInt(this.getAttribute('minlength'), 10) || 0;
+  init() {
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) this.inputs[1].focus();
+    });
+
+    super.init?.();
+
+    this.#initInputs();
   }
 
   getValidity() {
-    const hasCode = this.countryCodeInput.value;
-    const hasPhone = this.phoneNumberInput.value;
-    const emptyValue = !hasCode || !hasPhone;
-    const hasMinPhoneLength =
-      this.phoneNumberInput.value?.length && this.phoneNumberInput.value.length < this.minLength;
+    const countryCode = this.comboBox.value;
+    const nationalNumer = this.textField.value;
+
+    const hasCountryCode = !!countryCode.length;
+    const hasNationalNumber = !!nationalNumer.length;
 
-    if (this.isRequired && emptyValue) {
+    const isEmpty = !hasCountryCode || !hasNationalNumber;
+    const isValidLength = hasNationalNumber && nationalNumer.length >= this.minLength;
+
+    if (this.isRequired && isEmpty) {
       return { valueMissing: true };
     }
-    if (hasMinPhoneLength) {
+
+    if (!isValidLength) {
       return { tooShort: true };
     }
-    if (hasPhone && !hasCode) {
-      return { valueMissing: true };
+
+    if (this.value && this.isStrictValidation && !this.#isValidParsedValue()) {
+      return { patternMismatch: true };
     }
+
     return {};
   }
 
-  init() {
-    this.addEventListener('focus', (e) => {
-      // we want to ignore focus events we are dispatching
-      if (e.isTrusted) this.inputs[1].focus();
+  setSelectionRange(...args) {
+    this.textField.setSelectionRange(...args);
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue) {
+      if (attrName === 'default-code' && newValue) {
+        this.#handleDefaultCountryCode(newValue);
+      } else if (inputRelatedAttrs$1.includes(attrName)) {
+        const attr = mapAttrs$1[attrName] || attrName;
+
+        if (commonAttrs$1.includes(attrName)) {
+          this.inputs.forEach((input) => input.setAttribute(attr, newValue));
+        } else if (countryAttrs.includes(attrName)) {
+          this.comboBox.setAttribute(attr, newValue);
+        } else if (phoneAttrs.includes(attrName)) {
+          this.textField.setAttribute(attr, newValue);
+        }
+      }
+
+      if (labelTypeAttrs.includes(attrName)) {
+        this.#handleLabelTypeAttrs(attrName, newValue);
+      }
+
+      if (attrName === 'restrict-countries') {
+        this.#updateComboBoxItems(this.restrictCountries);
+      }
+    }
+  }
+
+  #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;
+      }
     });
 
-    super.init?.();
-    this.initInputs();
+    this.handleFocusEventsDispatching(this.inputs);
+    this.handleInputEventDispatching();
+
+    // verify country code item against phone number pattern and replace if needed and country is allowed
+    // (e.g. +1 can be US or CA, depending on the pattern)
+    this.addEventListener('input', this.#handleSameCountryCodes.bind(this));
   }
 
-  getRestrictedCountries() {
-    const attr = this.getAttribute('restrict-countries');
-    return attr ? attr.split(',') : [];
+  #setCountryCode(val) {
+    if (!val || val === this.selectedCountryCode) return;
+
+    let countryCodeItem = undefined;
+
+    if (this.value) {
+      // try to parse the phone number, and set country code item according to actual dial code (e.g. `+1` can be `US` or `CA`)
+      const code = this.#getCountryCodeByPhoneNumber(`${val}-${this.textField.value}`);
+      countryCodeItem = this.#getCountryByCodeId(code);
+    }
+
+    // in case country code item does not exist (for example: Parsed code is CA for +1 - but Canada is not allowed)
+    // then use the first option with same dial code (e.g. in that case - `US` for +1)
+    if (!countryCodeItem) {
+      countryCodeItem = this.#getCountryByDialCode(val);
+    }
+
+    // set country code item; in it doesn't exist in list - set `undefined`
+    this.comboBox.selectedItem = countryCodeItem;
   }
 
-  getCountryByDialCode(countryDialCode) {
-    return this.countryCodeInput.items?.find((c) => c.getAttribute('data-id') === countryDialCode);
+  #setNationalNumber(val) {
+    if (this.isFormatValue) {
+      val = this.#formatNationalNumber(val);
+    }
+
+    if (this.textField.value !== val) {
+      this.textField.value = val;
+    }
+  }
+
+  #formatNationalNumber(nationalNumber = '') {
+    // re-initialize AsYouType if country code is outdated
+    if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {
+      this.#ayt = new AsYouType(this.selectedCountryCode);
+    }
+
+    // reset previous AsYouType input
+    this.#ayt.reset();
+
+    const formattedVal = this.#ayt.input(nationalNumber);
+
+    return formattedVal || nationalNumber;
   }
 
-  getCountryByCodeId(countryCode) {
-    return this.countryCodeInput.items?.find(
-      (c) => c.getAttribute('data-country-code') === countryCode
+  #isValidParsedValue() {
+    const parsed = parsePhoneNumberFromString(this.value);
+
+    return (
+      parsed && // Parsed successfully (not undefined)
+      parsed.isValid?.() && // Parsed object is valid
+      parsed.country && // Parsed object with a country code
+      this.#isAllowedCountry(parsed.country) // Parsed with allowed country code
     );
   }
 
-  updateCountryCodeItems(restrictCountries) {
+  #isAllowedCountry(countryCode) {
+    if (!this.restrictCountries) {
+      return true;
+    }
+
+    return this.restrictCountries.includes(countryCode);
+  }
+
+  // return country item by dial code `data-id` (e.g. `+1`)
+  #getCountryByDialCode(dialCode) {
+    return this.comboBox.items?.find((c) => c.getAttribute('data-id') === dialCode) || undefined;
+  }
+
+  // return country item by country code `data-country-code` (e.g. `US`)
+  #getCountryByCodeId(countryCode) {
+    return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);
+  }
+
+  #getCountryCodeByPhoneNumber(val) {
+    if (!val) return undefined;
+    const parsed = parsePhoneNumberFromString(val);
+    if (!parsed?.country) return undefined;
+    const foundCountryItem = this.#getCountryByCodeId(parsed.country);
+    return foundCountryItem?.getAttribute('data-country-code');
+  }
+
+  #updateComboBoxItems(restrictCountries) {
     const items = restrictCountries.length
       ? CountryCodes.filter((c) => restrictCountries.includes(c.code))
       : CountryCodes;
+
     this.querySelector('descope-combo-box').innerHTML = items
       .map((item) => comboBoxItem(item))
       .join('');
   }
 
-  handleDefaultCountryCode(countryCode) {
-    if (!this.countryCodeInput.value) {
-      const countryCodeItem = this.getCountryByCodeId(countryCode);
+  #handleDefaultCountryCode(countryCode) {
+    if (!this.comboBox.value) {
+      const countryCodeItem = this.#getCountryByCodeId(countryCode);
       // When replacing the input component (inserting internal component into text-field) -
       // Vaadin resets the input's value. We use setTimeout in order to make sure this happens
       // after the reset.
       if (countryCodeItem) {
         setTimeout(() => {
-          this.countryCodeInput.selectedItem = countryCodeItem;
+          this.comboBox.selectedItem = countryCodeItem;
         });
       }
     }
   }
 
-  initInputs() {
-    // Sanitize phone input value to filter everything but digits
-    this.phoneNumberInput.addEventListener('input', (e) => {
-      // we want to update only phoneNumberInput, and avoid triggering `set value`
-      e.stopPropagation();
+  #handleSameCountryCodes() {
+    if (!this.value) return;
 
-      if (!this.allowAlphanumericInput) {
-        const telDigitsRegExp = /^\d$/;
-        const sanitizedInput = e.target.value
-          .split('')
-          .filter((char) => telDigitsRegExp.test(char))
-          .join('');
-        e.target.value = sanitizedInput;
-      }
-    });
+    const country = this.#getCountryCodeByPhoneNumber(this.value);
 
-    this.handleFocusEventsDispatching(this.inputs);
-    this.handleInputEventDispatching();
+    if (!country) return;
+
+    // re-set country code if needed (same coutnry code for different countries, e.g. +1 for US or CA)
+    if (this.selectedCountryCode !== country) {
+      const foundCountryItem = this.#getCountryByCodeId(country);
+      // if found country is defined in country list then set it, otherwise - clear phone number
+      if (foundCountryItem) {
+        this.comboBox.selectedItem = foundCountryItem;
+      }
+    }
   }
 
-  handleLabelTypeAttrs(attrName, newValue) {
+  #handleLabelTypeAttrs(attrName, newValue) {
     // set or remove label attributes from inner text/combo components on `label-type` change
     const attr = mapAttrs$1[attrName] || attrName;
 
     if (attrName === 'label-type') {
-      this.onLabelTypeChange(newValue);
+      this.#handleLabelTypeChange(newValue);
     }
     // on inner components label attr change - set label attributes for text/combo components
     // only if label-type is `floating`
     else if (this.getAttribute('label-type') === 'floating') {
       if (attrName === 'country-input-label') {
-        this.countryCodeInput.setAttribute(attr, newValue);
+        this.comboBox.setAttribute(attr, newValue);
       } else if (attrName === 'label') {
-        this.phoneNumberInput.setAttribute(attr, newValue);
+        this.textField.setAttribute(attr, newValue);
       }
     }
   }
 
-  onLabelTypeChange(newValue) {
+  #handleLabelTypeChange(newValue) {
     if (newValue === 'floating') {
       // on change to `floating` label - set inner components `label` and `placeholder`
-      this.countryCodeInput.setAttribute('label', this.getAttribute('country-input-label') || '');
-      this.countryCodeInput.setAttribute(
+      this.comboBox.setAttribute('label', this.getAttribute('country-input-label') || '');
+      this.comboBox.setAttribute(
         'placeholder',
         this.getAttribute('country-input-placeholder') || ''
       );
-      this.phoneNumberInput.setAttribute('label', this.getAttribute('label') || '');
-      this.phoneNumberInput.setAttribute(
+      this.textField.setAttribute('label', this.getAttribute('label') || '');
+      this.textField.setAttribute(
         'placeholder',
         this.getAttribute('phone-input-placeholder') || ''
       );
@@ -10447,34 +10592,6 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$8 {
       this.inputs.forEach((input) => input.removeAttribute('label'));
     }
   }
-
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    super.attributeChangedCallback(attrName, oldValue, newValue);
-
-    if (oldValue !== newValue) {
-      if (attrName === 'default-code' && newValue) {
-        this.handleDefaultCountryCode(newValue);
-      } else if (inputRelatedAttrs$1.includes(attrName)) {
-        const attr = mapAttrs$1[attrName] || attrName;
-
-        if (commonAttrs$1.includes(attrName)) {
-          this.inputs.forEach((input) => input.setAttribute(attr, newValue));
-        } else if (countryAttrs.includes(attrName)) {
-          this.countryCodeInput.setAttribute(attr, newValue);
-        } else if (phoneAttrs.includes(attrName)) {
-          this.phoneNumberInput.setAttribute(attr, newValue);
-        }
-      }
-
-      if (labelTypeAttrs.includes(attrName)) {
-        this.handleLabelTypeAttrs(attrName, newValue);
-      }
-
-      if (attrName === 'restrict-countries') {
-        this.updateCountryCodeItems(this.getRestrictedCountries());
-      }
-    }
-  }
 };
 
 customElements.define(componentName$P, PhoneFieldInternal$1);
@@ -10510,7 +10627,6 @@ const customMixin$a = (superclass) =>
         includeAttrs: [
           'size',
           'bordered',
-          'invalid',
           'minlength',
           'maxlength',
           'default-code',
@@ -10523,6 +10639,8 @@ const customMixin$a = (superclass) =>
           'label',
           'label-type',
           'allow-alphanumeric-input',
+          'format-value',
+          'strict-validation',
         ],
       });
     }
@@ -10671,6 +10789,7 @@ const PhoneFieldClass = compose$1(
     },
   }),
   draggableMixin$1,
+  inputOverrideValidConstraintsMixin,
   composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'] }),
   customMixin$a
 )(
@@ -10783,19 +10902,22 @@ const getCountryByCodeId = (countryCode) => {
   return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
 };
 
+const matchingParenthesis = (val) => {
+  const openParenMatches = val.match(/\(/g);
+  const closeParenMatches = val.match(/\)/g);
+  return openParenMatches?.length === closeParenMatches?.length;
+};
+
 const componentName$N = getComponentName$1('phone-field-internal-input-box');
 
 const observedAttributes$3 = [
   'disabled',
   'size',
-  'bordered',
-  'invalid',
   'readonly',
   'phone-input-placeholder',
   'name',
   'autocomplete',
   'label-type',
-  'allow-alphanumeric-input',
 ];
 const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
@@ -10808,77 +10930,95 @@ class PhoneFieldInternal extends BaseInputClass$7 {
     return [].concat(BaseInputClass$7.observedAttributes || [], observedAttributes$3);
   }
 
+  #ayt;
+
   constructor() {
     super();
 
     this.innerHTML = `
       <div>
-        <descope-text-field tabindex="1"></descope-text-field>
+        <descope-text-field tabindex="1" type="tel" bordered="false"></descope-text-field>
       </div>
       `;
 
-    this.phoneNumberInput = this.querySelector('descope-text-field');
+    this.textField = this.querySelector('descope-text-field');
   }
 
-  get defaultCountryCode() {
+  // notice: this function is exposed in parent component
+  get phoneNumberInputEle() {
+    return this.textField.shadowRoot.querySelector('input');
+  }
+
+  get defaultDialCode() {
     return getCountryByCodeId(this.getAttribute('default-code'));
   }
 
-  get hasDefaultCode() {
-    return !!this.getAttribute('default-code');
+  get defaultCode() {
+    return this.getAttribute('default-code');
   }
 
   get allowAlphanumericInput() {
     return this.getAttribute('allow-alphanumeric-input') === 'true';
   }
 
-  get value() {
-    if (!this.phoneNumberValue) {
-      return '';
-    }
+  get minLength() {
+    return parseInt(this.getAttribute('minlength'), 10) || 0;
+  }
 
-    if (this.hasDefaultCode) {
-      // we want to transform phone numbers to a valid {dialCode}-{phoneNumber} format
-      // e.g.:
-      // +972-12345 => +972-12345
-      // 972-12345 => +972-12345
-      // 12345 => +972-12345
-      //
-      // we also want to handle any extra dash if added in the start of the phone number
-      // e.g.:
-      // +972--12345 => +972-12345
-      const pattern = new RegExp(`\\+?${parseInt(this.defaultCountryCode, 10)}--?`);
-      return `${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(pattern, '')}`;
-    }
+  get maxLength() {
+    return parseInt(this.getAttribute('maxlength'), 10) || 50;
+  }
 
-    return this.phoneNumberInput.value;
+  get restrictCountries() {
+    return this.getAttribute('restrict-countries')?.split(',').filter(Boolean) || [];
   }
 
-  set value(val) {
-    this.phoneNumberInput.value = val;
+  get isFormatValue() {
+    return this.getAttribute('format-value') === 'true';
   }
 
-  get phoneNumberValue() {
-    return this.phoneNumberInput.value;
+  get isStrictValidation() {
+    return this.getAttribute('strict-validation') === 'true';
   }
 
-  get phoneNumberInputEle() {
-    return this.phoneNumberInput.shadowRoot.querySelector('input');
+  get value() {
+    if (!this.textField.value) return '';
+
+    if (!this.isStrictValidation) {
+      return this.#nonParsedValue();
+    }
+
+    const parsedVal = this.#parseWithCountryCode();
+
+    if (parsedVal?.country && parsedVal?.countryCallingCode && parsedVal?.nationalNumber) {
+      return `+${[parsedVal?.countryCallingCode, parsedVal?.nationalNumber].join('-')}`;
+    }
+
+    // if failed to parse or to find country code return text field value
+    return this.textField.value;
   }
 
-  get minLength() {
-    return parseInt(this.getAttribute('minlength'), 10) || 0;
+  set value(val) {
+    this.textField.value = val;
   }
 
-  get maxLength() {
-    return parseInt(this.getAttribute('maxlength'), 10) || 50;
+  init() {
+    this.addEventListener('focus', (e) => {
+      // We want to ignore focus events we are dispatching
+      if (e.isTrusted) this.textField.focus();
+    });
+
+    super.init?.();
+
+    this.textField.addEventListener('input', this.#onInput.bind(this));
+    this.handleFocusEventsDispatching([this.textField]);
   }
 
   getValidity() {
     const validPhonePattern = /^\+?\d{1,4}-?(?:\d-?){1,15}$/;
-    const stripValue = this.value.replace(/\D/g, '');
+    const stripValue = this.#sanitizeVal(this.textField.value);
 
-    if (this.isRequired && !this.value) {
+    if (this.isRequired && !this.textField.value) {
       return { valueMissing: true };
     }
 
@@ -10890,63 +11030,144 @@ class PhoneFieldInternal extends BaseInputClass$7 {
       return { tooLong: true };
     }
 
-    if (this.value && !validPhonePattern.test(this.value)) {
+    if (
+      // has `strict-validation` and not properly parsed
+      (this.isStrictValidation && this.textField.value && !this.#isValidParsedValue()) ||
+      // if no `strict-validation` then conform with naive pattern
+      (!this.isStrictValidation && this.textField.value && !validPhonePattern.test(this.value))
+    ) {
       return { patternMismatch: true };
     }
 
     return {};
   }
 
-  init() {
-    this.addEventListener('focus', (e) => {
-      // we want to ignore focus events we are dispatching
-      if (e.isTrusted) this.phoneNumberInput.focus();
-    });
+  setSelectionRange(...args) {
+    this.textField.setSelectionRange(...args);
+  }
 
-    super.init?.();
-    this.initInputs();
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue && observedAttributes$3.includes(attrName)) {
+      const attr = mapAttrs[attrName] || attrName;
+      this.textField.setAttribute(attr, newValue);
+    }
+  }
+
+  #onInput(e) {
+    let sanitizedInput = this.#sanitizeInput(e.target.value);
+
+    if (this.isFormatValue && this.#canFormat(sanitizedInput)) {
+      sanitizedInput = this.#formatPhoneNumber(sanitizedInput);
+    }
+
+    e.target.value = sanitizedInput;
+  }
+
+  #nonParsedValue() {
+    if (!this.defaultDialCode) {
+      return this.textField.value;
+    }
+
+    const nationalNumber = this.#trimDuplicateCountryCode(this.textField.value);
+    const sanitizedVal = this.#sanitizeVal(nationalNumber);
+
+    return [this.defaultDialCode, sanitizedVal].join('-');
+  }
+
+  #parseWithCountryCode() {
+    if (this.defaultDialCode) {
+      return parsePhoneNumberFromString$1(
+        [this.defaultDialCode, this.#sanitizeVal(this.textField.value)].filter(Boolean).join('')
+      );
+    }
+
+    // if default-code or not parsed - try to extract country code from value
+    return parsePhoneNumberFromString$1(this.textField.value);
+  }
+
+  #sanitizeVal(val) {
+    return val.replace(/\D/g, '');
+  }
+
+  #trimDuplicateCountryCode(val) {
+    if (this.textField.value?.[0] === '+') {
+      const dialCodePrefixPattern = new RegExp(`^\\${this.defaultDialCode}`);
+      const trimmed = val.replace(dialCodePrefixPattern, '');
+      return trimmed;
+    }
+    return val;
   }
 
-  getCountryByDialCode(countryDialCode) {
-    return this.countryCodeInput.items?.find(
-      (c) => c.getAttribute('data-country-code') === countryDialCode
+  #isValidParsedValue() {
+    const parsed = parsePhoneNumberFromString$1(this.value);
+    return (
+      parsed && // parsed successfully (not undefined)
+      parsed.isValid?.() && // Parsed object is valid
+      parsed.country && // Parsed object with a country code
+      this.#isAllowedCountry(parsed.country) && // Parsed with allowed country code
+      (this.defaultCode ? this.defaultCode === parsed.country : true) // In case default country code is set validate parsed country matches it
     );
   }
 
-  initInputs() {
-    // Sanitize phone input value to filter everything but digits
-    this.phoneNumberInput.addEventListener('input', (e) => {
-      if (e.target.value.length === 1 && e.target.value === '-') {
-        e.target.value = '';
-      }
+  #isAllowedCountry(countryCode) {
+    if (!this.restrictCountries) {
+      return true;
+    }
 
-      e.target.value = e.target.value
-        .replace(/(?!^)\+/g, '')
-        .replace('--', '-')
-        .replace('+-', '+');
+    return this.restrictCountries.includes(countryCode);
+  }
 
-      let sanitizedInput = e.target.value;
-      if (!this.allowAlphanumericInput) {
-        const telDigitsRegExp = /^[+\d-]+$/;
-        sanitizedInput = e.target.value
-          .split('')
-          .filter((char) => telDigitsRegExp.test(char))
-          .join('');
-      }
+  #sanitizeInput(val) {
+    val = val
+      .replace(/^-+/, '') // dash as first char
+      .replace(/(?!^)\+/g, '') // multiple plus symbols
+      .replace('--', '-') // consecutive dashes
+      .replace('+-', '+'); // dash following plus symbol
 
-      e.target.value = sanitizedInput;
-    });
+    if (!this.allowAlphanumericInput) {
+      const telDigitsRegExp = /^[+\d-\(\)]+$/;
+      val = val
+        .split('')
+        .filter((char) => telDigitsRegExp.test(char))
+        .join('');
+    }
 
-    this.handleFocusEventsDispatching([this.phoneNumberInput]);
+    return val;
   }
 
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    super.attributeChangedCallback(attrName, oldValue, newValue);
+  #formatPhoneNumber(phoneNumber = '') {
+    // Get country code from `default-code or` from phone number
+    const countryCode = this.defaultCode || this.#getCountryCodeFromValue(phoneNumber);
 
-    if (oldValue !== newValue && observedAttributes$3.includes(attrName)) {
-      const attr = mapAttrs[attrName] || attrName;
-      this.phoneNumberInput.setAttribute(attr, newValue);
+    // Skip formatting if no country code is available
+    if (!countryCode) {
+      return phoneNumber;
     }
+
+    // Update AsYouType country code if needed
+    if (!this.#ayt || this.#ayt.country !== countryCode) {
+      this.#ayt = new AsYouType(countryCode);
+    }
+
+    // We need to reset AsYouType instance before setting new input
+    this.#ayt.reset();
+
+    // Set AsYouType input
+    const formattedVal = this.#ayt.input(phoneNumber) || phoneNumber;
+
+    return formattedVal;
+  }
+
+  #getCountryCodeFromValue(val) {
+    const parsed = parsePhoneNumberFromString$1(val);
+    return parsed?.country || '';
+  }
+
+  #canFormat(val) {
+    if (!matchingParenthesis(val)) return false;
+    return true;
   }
 }
 
@@ -10957,7 +11178,7 @@ const textVars = TextFieldClass.cssVarList;
 const componentName$M = getComponentName$1('phone-input-box-field');
 
 const customMixin$9 = (superclass) =>
-  class PhoneInputBoxFieldMixinClass extends superclass {
+  class PhoneFieldInputBoxMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
     }
@@ -10981,8 +11202,6 @@ const customMixin$9 = (superclass) =>
       forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
           'size',
-          'bordered',
-          'invalid',
           'minlength',
           'maxlength',
           'default-code',
@@ -10991,6 +11210,10 @@ const customMixin$9 = (superclass) =>
           'label',
           'label-type',
           'allow-alphanumeric-input',
+          'restrict-countries',
+          'format-value',
+          'strict-validation',
+          'data-errormessage-type-mismatch',
         ],
       });
     }
@@ -11006,7 +11229,8 @@ const {
   inputElement: inputElement$1,
   requiredIndicator: requiredIndicator$3,
   inputField: inputField$1,
-  inputFieldInternal,
+  internalComponent,
+  internalComponentAfter,
   phoneInput,
   errorMessage: errorMessage$5,
   helperText: helperText$3,
@@ -11017,8 +11241,11 @@ const {
   inputElement: { selector: 'input' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
   inputField: { selector: () => 'vaadin-text-field::part(input-field)' },
-  inputFieldInternal: {
-    selector: () => 'descope-phone-field-internal-input-box vaadin-text-field::part(input-field)',
+  internalComponent: {
+    selector: 'descope-phone-field-internal-input-box',
+  },
+  internalComponentAfter: {
+    selector: 'descope-phone-field-internal-input-box::after',
   },
   phoneInput: { selector: () => 'descope-text-field' },
   helperText: { selector: '::part(helper-text)' },
@@ -11041,14 +11268,6 @@ const PhoneFieldInputBoxClass = compose$1(
       hostMinWidth: { ...host$f, property: 'min-width' },
       hostDirection: { ...host$f, property: 'direction' },
 
-      inputBorderStyle: { ...inputFieldInternal, property: 'border-style' },
-      inputBorderWidth: { ...inputFieldInternal, property: 'border-width' },
-      inputBorderColor: { ...inputFieldInternal, property: 'border-color' },
-      inputBorderRadius: [
-        { ...inputField$1, property: 'border-radius' },
-        { ...inputFieldInternal, property: 'border-radius' },
-      ],
-
       inputHorizontalPadding: [
         { ...phoneInput, property: 'padding-left' },
         { ...phoneInput, property: 'padding-right' },
@@ -11073,10 +11292,18 @@ const PhoneFieldInputBoxClass = compose$1(
 
       inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
 
-      inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
-      inputOutlineColor: { ...inputField$1, property: 'outline-color' },
-      inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
-      inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
+      inputBorderStyle: { ...internalComponentAfter, property: 'border-style' },
+      inputBorderWidth: { ...internalComponentAfter, property: 'border-width' },
+      inputBorderColor: { ...internalComponentAfter, property: 'border-color' },
+      inputBorderRadius: [
+        { ...internalComponent, property: 'border-radius' },
+        { ...internalComponentAfter, property: 'border-radius' },
+      ],
+
+      inputOutlineStyle: { ...internalComponent, property: 'outline-style' },
+      inputOutlineColor: { ...internalComponent, property: 'outline-color' },
+      inputOutlineWidth: { ...internalComponent, property: 'outline-width' },
+      inputOutlineOffset: { ...internalComponent, property: 'outline-offset' },
 
       labelPosition: { ...label$3, property: 'position' },
       labelTopPosition: { ...label$3, property: 'top' },
@@ -11095,6 +11322,7 @@ const PhoneFieldInputBoxClass = compose$1(
     },
   }),
   draggableMixin$1,
+  inputOverrideValidConstraintsMixin,
   composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'] }),
   customMixin$9
 )(
@@ -11126,7 +11354,6 @@ const PhoneFieldInputBoxClass = compose$1(
     vaadin-text-field::part(input-field) {
       padding: 0;
       background: transparent;
-      overflow: hidden;
       -webkit-mask-image: none;
     }
     descope-phone-field-internal-input-box {
@@ -11137,14 +11364,20 @@ const PhoneFieldInputBoxClass = compose$1(
     descope-phone-field-internal-input-box > div {
       width: 100%;
     }
-    descope-phone-field-internal-input-box .separator {
-      flex: 0;
-      border: none;
-    }
     descope-phone-field-internal-input-box descope-text-field {
       ${textVars.inputOutlineWidth}: 0;
       ${textVars.inputOutlineOffset}: 0;
     }
+    descope-phone-field-internal-input-box::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      box-sizing: border-box;
+      pointer-events: none;
+    }
     descope-text-field {
       flex-grow: 1;
       width: 100%;
@@ -17714,6 +17947,8 @@ const attrs = {
       'restrict-countries',
       'default-code',
       'phone-minlength',
+      'phone-format-value',
+      'phone-strict-validation',
       'data-errormessage-value-missing-phone',
     ],
     inputBox: [
@@ -17721,6 +17956,8 @@ const attrs = {
       'restrict-countries',
       'default-code',
       'phone-minlength',
+      'phone-format-value',
+      'phone-strict-validation',
       'data-errormessage-value-missing-phone',
     ],
   },
@@ -17734,6 +17971,8 @@ const attrMap = {
   phone: {
     'phone-input-label': 'label',
     'phone-minlength': 'minlength',
+    'phone-format-value': 'format-value',
+    'phone-strict-validation': 'strict-validation',
     'data-errormessage-value-missing-phone': 'data-errormessage-value-missing',
   },
 };
@@ -22327,7 +22566,7 @@ var addressField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$3
 });
 
-var clockIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNNiAwQzIuNyAwIDAgMi43IDAgNkMwIDkuMyAyLjcgMTIgNiAxMkM5LjMgMTIgMTIgOS4zIDEyIDZDMTIgMi43IDkuMyAwIDYgMFpNNiAxMC41QzMuNTI1IDEwLjUgMS41IDguNDc1IDEuNSA2QzEuNSAzLjUyNSAzLjUyNSAxLjUgNiAxLjVDOC40NzUgMS41IDEwLjUgMy41MjUgMTAuNSA2QzEwLjUgOC40NzUgOC40NzUgMTAuNSA2IDEwLjVaIiBmaWxsPSIjMTgxQTFDIi8+CiAgPHBhdGggZD0iTTYgMi4yNUg1LjI1VjYuNzVIOVY2SDZWMi4yNVoiIGZpbGw9IiMxODFBMUMiLz4KPC9zdmc+Cg==";
+var clockIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwMSAxMDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+CjxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+Cjwvc3ZnPgo=";
 
 const fmt = (val, pad = 2) => String(val).padStart(pad, '0');
 
@@ -22348,7 +22587,7 @@ const formatTime = (ms = 0) => {
 
 const componentName$1 = getComponentName('timer');
 
-const observedAttributes = ['seconds', 'hide-icon'];
+const observedAttributes = ['seconds', 'hide-icon', 'paused'];
 
 const BaseClass$1 = createBaseClass({
   componentName: componentName$1,
@@ -22406,57 +22645,63 @@ class RawTimer extends BaseClass$1 {
     return Math.max(0, secs);
   }
 
+  // we use `pause` attribute for allowing preview mode by executing `pause`
+  get isPaused() {
+    return this.getAttribute('paused') === 'true';
+  }
+
   init() {
     super.init?.();
 
     this.#timeRemains = this.seconds;
   }
 
-  start() {
-    this.dispatchEvent(new CustomEvent('timer-started', { bubbles: true }));
-
-    this.startInterval();
-  }
-
-  startInterval() {    
+  startInterval() {
     const intervalCycle = () => {
+      this.#decreaseInterval();
+      if (!this.#timeRemains) this.stop();
       this.#updateDisplay(this.#timeRemains);
-
-      if (!this.#timeRemains) {
-        this.stop();
-      } else {
-        this.#decreaseInterval();
-      }
     };
 
-    intervalCycle();
-
     if (this.#timeRemains) {
       this.#intervalId = setInterval(intervalCycle, DEFAULT_INTERVAL);
+    } else {
+      this.stop();
     }
   }
 
+  stopInterval() {
+    clearInterval(this.#intervalId);
+  }
+
   #decreaseInterval() {
-    this.#timeRemains = Math.max(this.#timeRemains - DEFAULT_INTERVAL, 0);
+    this.#timeRemains = this.#timeRemains - DEFAULT_INTERVAL;
   }
 
   reset() {
     this.#timeRemains = this.seconds;
-    this.start();
+    this.#updateDisplay(this.#timeRemains);
+
+    if (this.isPaused) return;
+
+    this.dispatchEvent(new CustomEvent('timer-started', { bubbles: true }));
+    this.startInterval();
   }
 
   stop() {
-    this.pause();
+    this.stopInterval();
     this.#timeRemains = 0;
     this.#updateDisplay(this.#timeRemains);
     this.dispatchEvent(new CustomEvent('timer-ended', { bubbles: true }));
   }
 
   pause() {
-    clearInterval(this.#intervalId);
+    this.setAttribute('paused', 'true');
+    this.stopInterval();
   }
 
   resume() {
+    this.removeAttribute('paused');
     this.startInterval();
   }
 
@@ -22468,6 +22713,19 @@ class RawTimer extends BaseClass$1 {
     this.icon.classList.toggle('hidden', val === 'true');
   }
 
+  #handlePause(paused) {
+    setTimeout(() => {
+      if (paused) {
+        this.pause();
+      } else {
+        // we want to prevent a another interval from starting in case previous interval was not yet cleared
+        if (!this.#intervalId) {
+          this.resume();
+        }
+      }
+    });
+  }
+
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
@@ -22478,28 +22736,31 @@ class RawTimer extends BaseClass$1 {
       if (attrName === 'hide-icon') {
         this.#toggleIcon(newValue);
       }
+      if (attrName === 'paused') {
+        this.#handlePause(newValue === 'true');
+      }
     }
   }
 }
 
 const { host: host$1, icon, timer: timer$2 } = {
   host: { selector: () => ':host' },
-  icon: { selector: '.icon' },
-  timer: { selector: '.timer' },
+  icon: { selector: () => '.icon' },
+  timer: { selector: () => '.timer' },
 };
 
 const TimerClass = compose(
   createStyleMixin({
     mappings: {
-      backgroundColor: {},
-      fontSize: [{}, { ...icon }],
+      fontSize: {},
       iconSize: [
         { ...icon, property: 'width' },
         { ...icon, property: 'height' },
       ],
       fontFamily: {},
+      minHeight: {},
       fontWeight: { ...timer$2 },
-      lineHeight: { property: 'min-height' },
+      lineHeight: { ...timer$2 },
       textColor: { ...timer$2, property: 'color' },
       gap: {},
       textAlign: { property: 'justify-content' },
@@ -22519,7 +22780,8 @@ const timer = {
   [vars$2.hostDirection]: globalRefs$1.direction,
   [vars$2.gap]: '0.25em',
   [vars$2.fontFamily]: globalRefs$1.fonts.font1.family,
-  [vars$2.lineHeight]: '2em',
+  [vars$2.minHeight]: '1.5em',
+  [vars$2.lineHeight]: '1em',
   [vars$2.fontWeight]: globalRefs$1.fonts.font1.fontWeight,
   [vars$2.textColor]: globalRefs$1.colors.surface.contrast,
   [vars$2.iconColor]: globalRefs$1.colors.surface.contrast,
@@ -22567,6 +22829,7 @@ const mapButtonAttrs = {
 const timerAttrs = [
   'timer-seconds',
   'timer-hide-icon',
+  'timer-paused',
   'size',
   'text-align',
   'full-width',
@@ -22575,6 +22838,7 @@ const timerAttrs = [
 const mapTimerAttrs = {
   'timer-seconds': 'seconds',
   'timer-hide-icon': 'hide-icon',
+  'timer-paused': 'paused',
 };
 
 const BaseClass = createBaseClass({
@@ -22589,7 +22853,7 @@ class RawTimerButton extends BaseClass {
     this.attachShadow({ mode: 'open' }).innerHTML = `
       <div class="wrapper">
         <descope-timer class="timer"></descope-timer>
-        <descope-button class="button">
+        <descope-button class="button" disabled="true">
           <slot></slot>
         </descope-button>
       </div>
@@ -22635,6 +22899,14 @@ class RawTimerButton extends BaseClass {
       includeAttrs: timerAttrs,
       mapAttrs: mapTimerAttrs,
     });
+
+    // When we sync attributes, the `disabled` attribute is being compared to the attribute
+    // on Vaadin component; since the Vaadin component has no `disabled` attribute, we sync
+    // that back to our component.
+    // This is pending a more generic fix in the way we sync attibutes.
+    this.button.shadowRoot
+      .querySelector('vaadin-button')
+      .setAttribute('disabled', 'true');
   }
 
   onTimerStarted() {
@@ -22650,9 +22922,11 @@ class RawTimerButton extends BaseClass {
   }
 
   toggleButtonDisable(isDisabled) {
-    isDisabled
-      ? this.button.setAttribute('disabled', 'true')
-      : this.button.removeAttribute('disabled');
+    setTimeout(() => {
+      isDisabled
+        ? this.button.setAttribute('disabled', 'true')
+        : this.button.removeAttribute('disabled');
+    });
   }
 }