@descope/web-components-ui 1.0.174 → 1.0.176

package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js

@@ -0,0 +1,158 @@
+import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';
+import { getComponentName } from '../../../../helpers/componentHelpers';
+import { getCountryByCodeId } from '../../helpers';
+
+export const componentName = getComponentName('phone-field-internal-input-box');
+
+const observedAttributes = [
+  'disabled',
+  'size',
+  'bordered',
+  'invalid',
+  'readonly',
+  'phone-input-placeholder',
+];
+const mapAttrs = {
+  'phone-input-placeholder': 'placeholder',
+};
+
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
+
+class PhoneFieldInternal extends BaseInputClass {
+  static get observedAttributes() {
+    return [].concat(BaseInputClass.observedAttributes || [], observedAttributes);
+  }
+
+  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 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 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-dial-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('+-', '+');
+
+      const telDigitsRegExp = /^[+\d-]+$/;
+      const sanitizedInput = e.target.value
+        .split('')
+        .filter((char) => telDigitsRegExp.test(char))
+        .join('');
+
+      e.target.value = sanitizedInput;
+    });
+
+    this.handleFocusEventsDispatching([this.phoneNumberInput]);
+    this.handleInputEventDispatching();
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue && observedAttributes.includes(attrName)) {
+      const attr = mapAttrs[attrName] || attrName;
+      this.phoneNumberInput.setAttribute(attr, newValue);
+    }
+  }
+}
+
+export default PhoneFieldInternal;

package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js

@@ -0,0 +1,5 @@
+import '../../../descope-text-field';
+
+import PhoneFieldInternalInputBox, { componentName } from './PhoneFieldInternalInputBox';
+
+customElements.define(componentName, PhoneFieldInternalInputBox);

package/src/components/phone-fields/descope-phone-input-box-field/index.js

@@ -0,0 +1,9 @@
+import './descope-phone-input-box-internal';
+import '../../descope-combo-box';
+import '../../descope-text-field';
+
+import { componentName, PhoneFieldInputBoxClass } from './PhoneFieldInputBoxClass';
+
+customElements.define(componentName, PhoneFieldInputBoxClass);
+
+export { PhoneFieldInputBoxClass };

package/src/components/phone-fields/helpers.js

@@ -0,0 +1,5 @@
+import CountryCodes from './CountryCodes';
+
+export const getCountryByCodeId = (countryCode) => {
+  return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
+};

package/src/index.cjs.js

@@ -22,6 +22,7 @@ export { TextClass } from './components/descope-text/TextClass';
 export { TextAreaClass } from './components/descope-text-area/TextAreaClass';
 export { TextFieldClass } from './components/descope-text-field/TextFieldClass';
 export { ImageClass } from './components/descope-image/ImageClass';
-export { PhoneFieldClass } from './components/descope-phone-field/PhoneFieldClass';
+export { PhoneFieldClass } from './components/phone-fields/descope-phone-field/PhoneFieldClass';
+export { PhoneFieldInputBoxClass } from './components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';
 export { NewPasswordClass } from './components/descope-new-password/NewPasswordClass';
 export { RecaptchaClass } from './components/descope-recaptcha/RecaptchaClass';

package/src/index.d.ts

@@ -27,7 +27,8 @@ export { TextClass } from './components/descope-text';
 export { TextAreaClass } from './components/descope-text-area';
 export { TextFieldClass } from './components/descope-text-field';
 export { ImageClass } from './components/descope-image';
-export { PhoneFieldClass } from './components/descope-phone-field';
+export { PhoneFieldClass } from './components/phone-fields/descope-phone-field';
+export { PhoneFieldInputBoxClass } from './components/phone-fields/descope-phone-input-box-field';
 export { NewPasswordClass } from './components/descope-new-password';
 export { RecaptchaClass } from './components/descope-recaptcha';
 export { UploadFileClass } from './components/descope-upload-file';

package/src/index.js

@@ -17,7 +17,8 @@ export * from './components/descope-text';
 export * from './components/descope-text-area';
 export * from './components/descope-text-field';
 export * from './components/descope-image';
-export * from './components/descope-phone-field';
+export * from './components/phone-fields/descope-phone-field';
+export * from './components/phone-fields/descope-phone-input-box-field';
 export * from './components/descope-new-password';
 export * from './components/descope-recaptcha';
 export * from './components/descope-upload-file';

package/src/theme/components/index.js

@@ -17,6 +17,7 @@ import { loaderRadial, loaderLinear } from './loader';
 import * as comboBox from './comboBox';
 import * as image from './image';
 import * as phoneField from './phoneField';
+import * as phoneInputBoxField from './phoneInputBoxField';
 import * as newPassword from './newPassword';
 import * as inputWrapper from './inputWrapper';
 import * as uploadFile from './uploadFile';
@@ -42,6 +43,7 @@ const components = {
   comboBox,
   image,
   phoneField,
+  phoneInputBoxField,
   newPassword,
   inputWrapper,
   uploadFile,

package/src/theme/components/phoneField.js

@@ -1,4 +1,4 @@
-import { PhoneFieldClass } from '../../components/descope-phone-field/PhoneFieldClass';
+import { PhoneFieldClass } from '../../components/phone-fields/descope-phone-field/PhoneFieldClass';
 import { refs } from './inputWrapper';
 
 const vars = PhoneFieldClass.cssVarList;

package/src/theme/components/phoneInputBoxField.js

@@ -0,0 +1,30 @@
+import { PhoneFieldInputBoxClass } from '../../components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';
+import { refs } from './inputWrapper';
+
+const vars = PhoneFieldInputBoxClass.cssVarList;
+
+const phoneInputBoxField = {
+  [vars.hostWidth]: '16em',
+  [vars.hostMinWidth]: refs.minWidth,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.inputValueTextColor]: refs.valueTextColor,
+  [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars.inputBorderStyle]: refs.borderStyle,
+  [vars.inputBorderWidth]: refs.borderWidth,
+  [vars.inputBorderColor]: refs.borderColor,
+  [vars.inputBorderRadius]: refs.borderRadius,
+  [vars.inputOutlineStyle]: refs.outlineStyle,
+  [vars.inputOutlineWidth]: refs.outlineWidth,
+  [vars.inputOutlineColor]: refs.outlineColor,
+  [vars.inputOutlineOffset]: refs.outlineOffset,
+  _fullWidth: {
+    [vars.hostWidth]: refs.width,
+  },
+};
+
+export default phoneInputBoxField;
+export { vars };