@descope/web-components-ui 1.0.413 → 1.0.414

package/dist/cjs/index.cjs.js

@@ -5,12 +5,8 @@ var Color = require('color');
 var DOMPurify = require('dompurify');
 var MarkdownIt = require('markdown-it');
 require('lodash.debounce');
-var min = require('libphonenumber-js/min');
+require('libphonenumber-js/min');
 var hljs = require('highlight.js');
-require('@vaadin/combo-box');
-require('@vaadin/text-field');
-require('@vaadin/icons');
-require('@vaadin/icon');
 
 const DESCOPE_PREFIX = 'descope';
 const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
@@ -2035,7 +2031,7 @@ const createProxy = ({
 
 })();
 
-const observedAttributes$5 = ['required', 'pattern'];
+const observedAttributes$4 = ['required', 'pattern'];
 
 const errorAttributes = {
   valueMissing: 'data-errormessage-value-missing',
@@ -2054,7 +2050,7 @@ const inputValidationMixin = (superclass) =>
     #validationTarget = validationTargetSymbol;
 
     static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...observedAttributes$5];
+      return [...(superclass.observedAttributes || []), ...observedAttributes$4];
     }
 
     static get formAssociated() {
@@ -2226,7 +2222,7 @@ const inputValidationMixin = (superclass) =>
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-      if (observedAttributes$5.includes(attrName)) {
+      if (observedAttributes$4.includes(attrName)) {
         this.#setValidity();
       }
     }
@@ -6203,12 +6199,12 @@ const LoaderRadialClass = compose(
 
 const componentName$H = getComponentName('passcode');
 
-const observedAttributes$4 = ['digits'];
+const observedAttributes$3 = ['digits'];
 
 const customMixin$9 = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
-      return observedAttributes$4.concat(superclass.observedAttributes || []);
+      return observedAttributes$3.concat(superclass.observedAttributes || []);
     }
 
     get digits() {
@@ -7218,14 +7214,14 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$y
 });
 
-const observedAttributes$3 = ['src', 'alt'];
+const observedAttributes$2 = ['src', 'alt'];
 
 const componentName$E = getComponentName('image');
 
 const BaseClass$2 = createBaseClass({ componentName: componentName$E, baseSelector: ':host > img' });
 class RawImage extends BaseClass$2 {
   static get observedAttributes() {
-    return observedAttributes$3.concat(BaseClass$2.observedAttributes || []);
+    return observedAttributes$2.concat(BaseClass$2.observedAttributes || []);
   }
 
   constructor() {
@@ -7248,7 +7244,7 @@ class RawImage extends BaseClass$2 {
   connectedCallback() {
     super.connectedCallback?.();
 
-    forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$3 });
+    forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$2 });
   }
 }
 
@@ -8488,322 +8484,9 @@ var CountryCodes = [
   ].sort((a, b) => (a.name < b.name ? -1 : 1)),
 ];
 
-// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)
-// This reduces our bundle size, and we use it as a static remote resource.
-const getCountryFlag = (code) =>
-  `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;
-
-const comboBoxItem = ({ code, dialCode, name: country }) => `
-	<div
-		style="display:flex; flex-direction: column;"
-		data-id="${dialCode}"
-		data-name="${code} ${dialCode} ${country}"
-		data-country-code="${code}"
-	>
-		<div>
-			<span>
-				<img src="${getCountryFlag(code)}" width="20"/>
-			</span>
-			<span>${country}</span>
-		</div>
-		<div>
-			<span>${code}</span>
-			<span>${dialCode}</span>
-		</div>
-	</div>
-`;
-
-const parsePhoneNumber = (val) => {
-  const value = val || '';
-  let countryCode = '';
-  let phoneNumber = '';
-
-  // Attempt to parse the value using libphonenumber-js
-  const parsed = min.parsePhoneNumberFromString(value);
-
-  if (parsed) {
-    if (parsed.countryCallingCode) {
-      countryCode = `+${parsed.countryCallingCode}`;
-    }
-
-    if (parsed.nationalNumber) {
-      phoneNumber = parsed.nationalNumber;
-    }
-  } else {
-    // Fallback: assume a dash separates country code and phone number
-    const [country, phone] = value.split('-');
-    countryCode = country || '';
-    phoneNumber = phone || '';
-  }
-
-  return [countryCode, phoneNumber];
-};
-
 const componentName$D = getComponentName('phone-field-internal');
 
-const commonAttrs = ['disabled', 'size', 'bordered', 'readonly', 'allow-alphanumeric-input'];
-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'];
-const mapAttrs$1 = {
-  'country-input-label': 'label',
-  'country-input-placeholder': 'placeholder',
-  'phone-input-placeholder': 'placeholder',
-};
-
-const inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);
-
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$D, baseSelector: 'div' });
-
-let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$4 {
-  static get observedAttributes() {
-    return [].concat(BaseInputClass$4.observedAttributes || [], inputRelatedAttrs);
-  }
-
-  constructor() {
-    super();
-
-    this.innerHTML = `
-    <div class="wrapper">
-      <descope-combo-box
-        item-label-path="data-name"
-        item-value-path="data-id"
-      >
-      ${CountryCodes.map((item) => comboBoxItem(item)).join('')}
-      </descope-combo-box>
-      <div class="separator"></div>
-      <descope-text-field type="tel"></descope-text-field>
-    </div>
-    `;
-
-    this.countryCodeInput = this.querySelector('descope-combo-box');
-    this.phoneNumberInput = this.querySelector('descope-text-field');
-    this.inputs = [this.countryCodeInput, this.phoneNumberInput];
-
-    forwardAttrs(this, this.countryCodeInput, { includeAttrs: ['label-type'] });
-    forwardAttrs(this, this.phoneNumberInput, { includeAttrs: ['label-type', 'required'] });
-
-    // override combo box setter to display dialCode value in input
-    this.countryCodeInput.customValueTransformFn = (val) => {
-      const [, dialCode] = val?.split?.(' ') || [];
-      return dialCode;
-    };
-  }
-
-  get countryCodeInputData() {
-    return this.countryCodeInput.items;
-  }
-
-  get allowAlphanumericInput() {
-    return this.getAttribute('allow-alphanumeric-input') === 'true';
-  }
-
-  get value() {
-    if (!this.phoneNumberValue) {
-      return '';
-    }
-    return `${this.countryCodeInput.value}-${this.phoneNumberInput.value}`;
-  }
-
-  set value(val) {
-    const [countryCode, phoneNumber] = parsePhoneNumber(val);
-
-    this.#setCountryCode(countryCode);
-    this.#setPhoneNumber(phoneNumber);
-  }
-
-  setSelectionRange(...args) {
-    this.phoneNumberInput.setSelectionRange(...args);
-  }
-
-  get selectionStart() {
-    return this.phoneNumberInput.selectionStart;
-  }
-
-  #setCountryCode(val) {
-    if (val) {
-      const countryCodeItem = this.getCountryByDialCode(val);
-      if (countryCodeItem) {
-        this.countryCodeInput.selectedItem = countryCodeItem;
-      }
-    } else {
-      this.countryCodeInput.selectedItem = undefined;
-    }
-  }
-
-  #setPhoneNumber(val) {
-    if (this.phoneNumberInput.value === val) {
-      return;
-    }
-
-    this.phoneNumberInput.value = val;
-  }
-
-  get phoneNumberValue() {
-    return this.phoneNumberInput.value;
-  }
-
-  get countryCodeValue() {
-    return this.countryCodeInput.shadowRoot.querySelector('input').value;
-  }
-
-  get phoneNumberInputEle() {
-    return this.phoneNumberInput.shadowRoot.querySelector('input');
-  }
-
-  get minLength() {
-    return parseInt(this.getAttribute('minlength'), 10) || 0;
-  }
-
-  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;
-
-    if (this.isRequired && emptyValue) {
-      return { valueMissing: true };
-    }
-    if (hasMinPhoneLength) {
-      return { tooShort: true };
-    }
-    if (hasPhone && !hasCode) {
-      return { valueMissing: true };
-    }
-    return {};
-  }
-
-  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();
-  }
-
-  getRestrictedCountries() {
-    const attr = this.getAttribute('restrict-countries');
-    return attr ? attr.split(',') : [];
-  }
-
-  getCountryByDialCode(countryDialCode) {
-    return this.countryCodeInput.items?.find((c) => c.getAttribute('data-id') === countryDialCode);
-  }
-
-  getCountryByCodeId(countryCode) {
-    return this.countryCodeInput.items?.find(
-      (c) => c.getAttribute('data-country-code') === countryCode
-    );
-  }
-
-  updateCountryCodeItems(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);
-      // 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;
-        });
-      }
-    }
-  }
-
-  initInputs() {
-    // Sanitize phone input value to filter everything but digits
-    this.phoneNumberInput.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;
-      }
-    });
-
-    this.handleFocusEventsDispatching(this.inputs);
-    this.handleInputEventDispatching();
-  }
-
-  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);
-    }
-    // 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);
-      } else if (attrName === 'label') {
-        this.phoneNumberInput.setAttribute(attr, newValue);
-      }
-    }
-  }
-
-  onLabelTypeChange(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(
-        'placeholder',
-        this.getAttribute('country-input-placeholder') || ''
-      );
-      this.phoneNumberInput.setAttribute('label', this.getAttribute('label') || '');
-      this.phoneNumberInput.setAttribute(
-        'placeholder',
-        this.getAttribute('phone-input-placeholder') || ''
-      );
-    } else {
-      // for other cases - reset inner components label-type and labels
-      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.includes(attrName)) {
-        const attr = mapAttrs$1[attrName] || attrName;
-
-        if (commonAttrs.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());
-      }
-    }
-  }
-};
+createBaseInputClass({ componentName: componentName$D, baseSelector: 'div' });
 
 const textVars$2 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
@@ -9147,176 +8830,9 @@ var phoneField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$w
 });
 
-const getCountryByCodeId = (countryCode) => {
-  return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
-};
-
 const componentName$B = getComponentName('phone-field-internal-input-box');
 
-const observedAttributes$2 = [
-  'disabled',
-  'size',
-  'bordered',
-  'invalid',
-  'readonly',
-  'phone-input-placeholder',
-  'name',
-  'autocomplete',
-  'label-type',
-  'allow-alphanumeric-input',
-];
-const mapAttrs = {
-  'phone-input-placeholder': 'placeholder',
-};
-
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$B, baseSelector: 'div' });
-
-class PhoneFieldInternal extends BaseInputClass$3 {
-  static get observedAttributes() {
-    return [].concat(BaseInputClass$3.observedAttributes || [], observedAttributes$2);
-  }
-
-  constructor() {
-    super();
-
-    this.innerHTML = `
-      <div>
-        <descope-text-field tabindex="1"></descope-text-field>
-      </div>
-      `;
-
-    this.phoneNumberInput = this.querySelector('descope-text-field');
-  }
-
-  get defaultCountryCode() {
-    return getCountryByCodeId(this.getAttribute('default-code'));
-  }
-
-  get hasDefaultCode() {
-    return !!this.getAttribute('default-code');
-  }
-
-  get allowAlphanumericInput() {
-    return this.getAttribute('allow-alphanumeric-input') === 'true';
-  }
-
-  get value() {
-    if (!this.phoneNumberValue) {
-      return '';
-    }
-
-    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, '')}`;
-    }
-
-    return this.phoneNumberInput.value;
-  }
-
-  set value(val) {
-    this.phoneNumberInput.value = val;
-  }
-
-  get phoneNumberValue() {
-    return this.phoneNumberInput.value;
-  }
-
-  get phoneNumberInputEle() {
-    return this.phoneNumberInput.shadowRoot.querySelector('input');
-  }
-
-  get minLength() {
-    return parseInt(this.getAttribute('minlength'), 10) || 0;
-  }
-
-  get maxLength() {
-    return parseInt(this.getAttribute('maxlength'), 10) || 50;
-  }
-
-  getValidity() {
-    const validPhonePattern = /^\+?\d{1,4}-?(?:\d-?){1,15}$/;
-    const stripValue = this.value.replace(/\D/g, '');
-
-    if (this.isRequired && !this.value) {
-      return { valueMissing: true };
-    }
-
-    if (stripValue.length < this.minLength) {
-      return { tooShort: true };
-    }
-
-    if (stripValue.length > this.maxLength) {
-      return { tooLong: true };
-    }
-
-    if (!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();
-    });
-
-    super.init?.();
-    this.initInputs();
-  }
-
-  getCountryByDialCode(countryDialCode) {
-    return this.countryCodeInput.items?.find(
-      (c) => c.getAttribute('data-country-code') === countryDialCode
-    );
-  }
-
-  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 = '';
-      }
-
-      e.target.value = e.target.value
-        .replace(/(?!^)\+/g, '')
-        .replace('--', '-')
-        .replace('+-', '+');
-
-      let sanitizedInput = e.target.value;
-      if (!this.allowAlphanumericInput) {
-        const telDigitsRegExp = /^[+\d-]+$/;
-        sanitizedInput = e.target.value
-          .split('')
-          .filter((char) => telDigitsRegExp.test(char))
-          .join('');
-      }
-
-      e.target.value = sanitizedInput;
-    });
-
-    this.handleFocusEventsDispatching([this.phoneNumberInput]);
-  }
-
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    super.attributeChangedCallback(attrName, oldValue, newValue);
-
-    if (oldValue !== newValue && observedAttributes$2.includes(attrName)) {
-      const attr = mapAttrs[attrName] || attrName;
-      this.phoneNumberInput.setAttribute(attr, newValue);
-    }
-  }
-}
+createBaseInputClass({ componentName: componentName$B, baseSelector: 'div' });
 
 const textVars$1 = TextFieldClass.cssVarList;
 
@@ -17643,18 +17159,6 @@ const isNumericValue = (val) => NUMERIC_RE.test(val.replaceAll('+', '').replaceA
 
 const sanitizeCountryCodePrefix = (val) => val.replace(/\+\d+-/, '');
 
-customElements.define(componentName$F, ComboBoxClass);
-
-customElements.define(componentName$_, TextFieldClass);
-
-customElements.define(componentName$D, PhoneFieldInternal$1);
-
-customElements.define(componentName$C, PhoneFieldClass);
-
-customElements.define(componentName$B, PhoneFieldInternal);
-
-customElements.define(componentName$A, PhoneFieldInputBoxClass);
-
 const componentName$2 = getComponentName('hybrid-field');
 
 const attrs = {