@descope/web-components-ui 1.0.402 → 1.0.403

package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js

@@ -5,7 +5,7 @@ import { comboBoxItem, parsePhoneNumber } from '../helpers';
 
 export const componentName = getComponentName('phone-field-internal');
 
-const commonAttrs = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
+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'];
@@ -28,7 +28,7 @@ class PhoneFieldInternal extends BaseInputClass {
     super();
 
     this.innerHTML = `
-    <div>
+    <div class="wrapper">
       <descope-combo-box
         item-label-path="data-name"
         item-value-path="data-id"
@@ -54,6 +54,14 @@ class PhoneFieldInternal extends BaseInputClass {
     };
   }
 
+  get countryCodeInputData() {
+    return this.countryCodeInput.items;
+  }
+
+  get allowAlphanumericInput() {
+    return this.getAttribute('allow-alphanumeric-input') === 'true';
+  }
+
   get value() {
     if (!this.phoneNumberValue) {
       return '';
@@ -64,15 +72,35 @@ class PhoneFieldInternal extends BaseInputClass {
   set value(val) {
     const [countryCode, phoneNumber] = parsePhoneNumber(val);
 
-    if (countryCode) {
-      const countryCodeItem = this.getCountryByDialCode(countryCode);
+    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;
     }
-    this.phoneNumberInput.value = this.phoneNumberInput.value || phoneNumber;
+  }
+
+  #setPhoneNumber(val) {
+    if (this.phoneNumberInput.value === val) {
+      return;
+    }
+
+    this.phoneNumberInput.value = val;
   }
 
   get phoneNumberValue() {
@@ -83,6 +111,10 @@ class PhoneFieldInternal extends BaseInputClass {
     return this.countryCodeInput.shadowRoot.querySelector('input').value;
   }
 
+  get phoneNumberInputEle() {
+    return this.phoneNumberInput.shadowRoot.querySelector('input');
+  }
+
   get minLength() {
     return parseInt(this.getAttribute('minlength'), 10) || 0;
   }
@@ -156,12 +188,14 @@ class PhoneFieldInternal extends BaseInputClass {
   initInputs() {
     // Sanitize phone input value to filter everything but digits
     this.phoneNumberInput.addEventListener('input', (e) => {
-      const telDigitsRegExp = /^\d$/;
-      const sanitizedInput = e.target.value
-        .split('')
-        .filter((char) => telDigitsRegExp.test(char))
-        .join('');
-      e.target.value = sanitizedInput;
+      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);

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

@@ -51,9 +51,14 @@ const customMixin = (superclass) =>
           'phone-input-placeholder',
           'label',
           'label-type',
+          'allow-alphanumeric-input',
         ],
       });
     }
+
+    get phoneNumberInputEle() {
+      return this.inputElement?.phoneNumberInputEle;
+    }
   };
 
 const {
@@ -62,6 +67,7 @@ const {
   inputElement,
   requiredIndicator,
   inputField,
+  inputFieldInternal,
   phoneInput,
   errorMessage,
   helperText,
@@ -71,7 +77,10 @@ const {
   placeholder: { selector: '> input:placeholder-shown' },
   inputElement: { selector: 'input' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-  inputField: { selector: '::part(input-field)' },
+  inputField: { selector: () => 'vaadin-text-field::part(input-field)' },
+  inputFieldInternal: {
+    selector: () => 'descope-phone-field-internal-input-box vaadin-text-field::part(input-field)',
+  },
   phoneInput: { selector: () => 'descope-text-field' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
@@ -93,10 +102,13 @@ export const PhoneFieldInputBoxClass = compose(
       hostMinWidth: { ...host, property: 'min-width' },
       hostDirection: { ...host, property: 'direction' },
 
-      inputBorderStyle: { ...inputField, property: 'border-style' },
-      inputBorderWidth: { ...inputField, property: 'border-width' },
-      inputBorderColor: { ...inputField, property: 'border-color' },
-      inputBorderRadius: { ...inputField, property: 'border-radius' },
+      inputBorderStyle: { ...inputFieldInternal, property: 'border-style' },
+      inputBorderWidth: { ...inputFieldInternal, property: 'border-width' },
+      inputBorderColor: { ...inputFieldInternal, property: 'border-color' },
+      inputBorderRadius: [
+        { ...inputField, property: 'border-radius' },
+        { ...inputFieldInternal, property: 'border-radius' },
+      ],
 
       inputHorizontalPadding: [
         { ...phoneInput, property: 'padding-left' },
@@ -157,7 +169,6 @@ export const PhoneFieldInputBoxClass = compose(
 
     vaadin-text-field {
       width: 100%;
-      height: 100%;
       box-sizing: border-box;
       padding: 0;
     }
@@ -177,23 +188,21 @@ export const PhoneFieldInputBoxClass = compose(
       -webkit-mask-image: none;
       padding: 0;
       width: 100%;
-      height: 100%;
     }
     descope-phone-field-internal-input-box > div {
       width: 100%;
-      height: 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-text-field {
       flex-grow: 1;
       width: 100%;
-      ${textVars.inputOutlineWidth}: 0;
-      ${textVars.inputOutlineOffset}: 0;
-      ${textVars.inputBorderWidth}: 0;
-      ${textVars.inputBorderRadius}: 0;
       direction: ltr;
     }
     vaadin-text-field[readonly] > input:placeholder-shown {

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

@@ -14,6 +14,7 @@ const observedAttributes = [
   'name',
   'autocomplete',
   'label-type',
+  'allow-alphanumeric-input',
 ];
 const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
@@ -46,6 +47,10 @@ class PhoneFieldInternal extends BaseInputClass {
     return !!this.getAttribute('default-code');
   }
 
+  get allowAlphanumericInput() {
+    return this.getAttribute('allow-alphanumeric-input') === 'true';
+  }
+
   get value() {
     if (!this.phoneNumberValue) {
       return '';
@@ -76,6 +81,10 @@ class PhoneFieldInternal extends BaseInputClass {
     return this.phoneNumberInput.value;
   }
 
+  get phoneNumberInputEle() {
+    return this.phoneNumberInput.shadowRoot.querySelector('input');
+  }
+
   get minLength() {
     return parseInt(this.getAttribute('minlength'), 10) || 0;
   }
@@ -135,11 +144,14 @@ class PhoneFieldInternal extends BaseInputClass {
         .replace('--', '-')
         .replace('+-', '+');
 
-      const telDigitsRegExp = /^[+\d-]+$/;
-      const sanitizedInput = e.target.value
-        .split('')
-        .filter((char) => telDigitsRegExp.test(char))
-        .join('');
+      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;
     });

package/src/index.cjs.js

@@ -56,3 +56,4 @@ export { ScopesListClass } from './components/descope-scopes-list/ScopesListClas
 export { ThirdPartyAppLogoClass } from './components/descope-third-party-app-logo/ThirdPartyAppLogoClass';
 export { SecurityQuestionsSetupClass } from './components/descope-security-questions-setup/SecurityQuestionsSetupClass';
 export { SecurityQuestionsVerifyClass } from './components/descope-security-questions-verify/SecurityQuestionsVerifyClass';
+export { HybridFieldClass } from './components/descope-hybrid-field/HybridFieldClass';

package/src/index.js

@@ -48,6 +48,7 @@ export * from './components/descope-scopes-list';
 export * from './components/descope-third-party-app-logo';
 export * from './components/descope-security-questions-setup';
 export * from './components/descope-security-questions-verify';
+export * from './components/descope-hybrid-field';
 
 export {
   globalsThemeToStyle,

package/src/mixins/inputEventsDispatchingMixin.js

@@ -59,13 +59,13 @@ export const inputEventsDispatchingMixin = (superclass) =>
     handleInputEventDispatching() {
       let previousRootComponentValue = this.value;
 
+      // we are comparing the previous value to the new one,
+      // and if they have the same value, we are blocking the input event
       this.addEventListener('input', (e) => {
-        // we are comparing the previous value to the new one,
-        // and if they have the same value, we are blocking the input event
-        if (previousRootComponentValue === this.value) {
-          e.stopImmediatePropagation();
-        } else {
+        e.stopImmediatePropagation();
+        if (previousRootComponentValue !== this.value) {
           previousRootComponentValue = this.value;
+          createDispatchEvent.call(this, 'input', { bubbles: true });
         }
       });
     }

package/src/theme/components/hybridField.js

@@ -0,0 +1,15 @@
+import { HybridFieldClass } from '../../components/descope-hybrid-field/HybridFieldClass';
+import { refs } from './inputWrapper';
+
+const vars = HybridFieldClass.cssVarList;
+
+const hybridField = {
+  [vars.hostDirection]: refs.direction,
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default hybridField;
+export { vars };

package/src/theme/components/index.js

@@ -50,6 +50,7 @@ import * as scopesList from './scopesList';
 import * as thirdPartyAppLogo from './thirdPartyAppLogo';
 import * as securityQuestionsSetup from './securityQuestionsSetup';
 import * as securityQuestionsVerify from './securityQuestionsVerify';
+import * as hybridField from './hybridField';
 
 const components = {
   button,
@@ -105,6 +106,7 @@ const components = {
   thirdPartyAppLogo,
   securityQuestionsSetup,
   securityQuestionsVerify,
+  hybridField,
 };
 
 const theme = Object.keys(components).reduce(

package/dist/umd/4831.js

@@ -1,148 +0,0 @@
-/*! For license information please see 4831.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4831,7212],{31111:(t,e,o)=>{o(46165),o(14968),o(37451),o(72815);var a=o(90500),i=o(6052);const r=i.AH`
-  :host {
-    outline: none;
-  }
-
-  [part='toggle-button']::before {
-    content: var(--lumo-icons-dropdown);
-  }
-`;(0,i.SF)("vaadin-combo-box",[a.k,r],{moduleId:"lumo-combo-box"}),o(9077);var s=o(33791),n=o(38735),l=o(35717),d=o(10187);class p extends((0,d.y)((0,i.cp)((0,l.v)(s.Pu)))){static get template(){return s.qy`
-      <style>
-        :host {
-          display: block;
-        }
-
-        :host([hidden]) {
-          display: none;
-        }
-      </style>
-      <span part="checkmark" aria-hidden="true"></span>
-      <div part="content">
-        <slot></slot>
-      </div>
-    `}static get is(){return"vaadin-combo-box-item"}}(0,n.X)(p);var c=o(21380),u=o(52718),v=o(75482);const h=i.AH`
-  #overlay {
-    width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
-  }
-
-  [part='content'] {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-`;(0,i.SF)("vaadin-combo-box-overlay",[u.B,h],{moduleId:"vaadin-combo-box-overlay-styles"});class m extends((0,v.p)((0,c.c)((0,l.v)((0,i.cp)(s.Pu))))){static get is(){return"vaadin-combo-box-overlay"}static get template(){return s.qy`
-      <div id="backdrop" part="backdrop" hidden></div>
-      <div part="overlay" id="overlay">
-        <div part="loader"></div>
-        <div part="content" id="content"><slot></slot></div>
-      </div>
-    `}}(0,n.X)(m);var g=o(44998);class b extends((0,g.N)(s.Pu)){static get is(){return"vaadin-combo-box-scroller"}static get template(){return s.qy`
-      <style>
-        :host {
-          display: block;
-          min-height: 1px;
-          overflow: auto;
-
-          /* Fixes item background from getting on top of scrollbars on Safari */
-          transform: translate3d(0, 0, 0);
-
-          /* Enable momentum scrolling on iOS */
-          -webkit-overflow-scrolling: touch;
-
-          /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
-          box-shadow: 0 0 0 white;
-        }
-
-        #selector {
-          border-width: var(--_vaadin-combo-box-items-container-border-width);
-          border-style: var(--_vaadin-combo-box-items-container-border-style);
-          border-color: var(--_vaadin-combo-box-items-container-border-color, transparent);
-          position: relative;
-        }
-      </style>
-      <div id="selector">
-        <slot></slot>
-      </div>
-    `}}(0,n.X)(b);var y=o(31846),_=o(58074),x=o(32318),f=o(15408),C=o(3550),w=o(3410);const k=t=>class extends((0,w.U)(t)){static get properties(){return{pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"pattern"]}static get constraints(){return[...super.constraints,"pattern"]}};var S=o(89385),E=o(5792),A=o(93131);(0,i.SF)("vaadin-combo-box",S.k,{moduleId:"vaadin-combo-box-styles"});class q extends((0,E.K)((0,A.x)(k((0,x.R)((0,i.cp)((0,y.q)(s.Pu))))))){static get is(){return"vaadin-combo-box"}static get template(){return s.qy`
-      <style>
-        :host([opened]) {
-          pointer-events: auto;
-        }
-      </style>
-
-      <div class="vaadin-combo-box-container">
-        <div part="label">
-          <slot name="label"></slot>
-          <span part="required-indicator" aria-hidden="true" on-click="focus"></span>
-        </div>
-
-        <vaadin-input-container
-          part="input-field"
-          readonly="[[readonly]]"
-          disabled="[[disabled]]"
-          invalid="[[invalid]]"
-          theme$="[[_theme]]"
-        >
-          <slot name="prefix" slot="prefix"></slot>
-          <slot name="input"></slot>
-          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
-          <div id="toggleButton" part="toggle-button" slot="suffix" aria-hidden="true"></div>
-        </vaadin-input-container>
-
-        <div part="helper-text">
-          <slot name="helper"></slot>
-        </div>
-
-        <div part="error-message">
-          <slot name="error-message"></slot>
-        </div>
-      </div>
-
-      <vaadin-combo-box-overlay
-        id="overlay"
-        opened="[[_overlayOpened]]"
-        loading$="[[loading]]"
-        theme$="[[_theme]]"
-        position-target="[[_positionTarget]]"
-        no-vertical-overlap
-        restore-focus-node="[[inputElement]]"
-      ></vaadin-combo-box-overlay>
-
-      <slot name="tooltip"></slot>
-    `}static get properties(){return{_positionTarget:{type:Object}}}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new f.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new C.q(this.inputElement,this._labelController)),this._tooltipController=new _.I(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this._tooltipController.setShouldShow((t=>!t.opened)),this._positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this._toggleElement=this.$.toggleButton}_onClearButtonClick(t){t.stopPropagation(),super._onClearButtonClick(t)}_onHostClick(t){const e=t.composedPath();(e.includes(this._labelNode)||e.includes(this._positionTarget))&&super._onHostClick(t)}}(0,n.X)(q)},53430:(t,e,o)=>{o.d(e,{a:()=>i});var a=o(32318);const i=t=>class extends((0,a.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},34068:(t,e,o)=>{o.d(e,{A:()=>v}),o(9077);var a=o(33791),i=o(38735),r=o(31846),s=o(58074),n=o(89385),l=o(6052),d=o(15408),p=o(53430),c=o(3550);const u=t=>class extends((0,p.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new d.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new c.q(this.inputElement,this._labelController))}};(0,l.SF)("vaadin-text-field",n.k,{moduleId:"vaadin-text-field-styles"});class v extends(u((0,l.cp)((0,r.q)(a.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return a.qy`
-      <style>
-        [part='input-field'] {
-          flex-grow: 0;
-        }
-      </style>
-
-      <div class="vaadin-field-container">
-        <div part="label">
-          <slot name="label"></slot>
-          <span part="required-indicator" aria-hidden="true" on-click="focus"></span>
-        </div>
-
-        <vaadin-input-container
-          part="input-field"
-          readonly="[[readonly]]"
-          disabled="[[disabled]]"
-          invalid="[[invalid]]"
-          theme$="[[_theme]]"
-        >
-          <slot name="prefix" slot="prefix"></slot>
-          <slot name="input"></slot>
-          <slot name="suffix" slot="suffix"></slot>
-          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
-        </vaadin-input-container>
-
-        <div part="helper-text">
-          <slot name="helper"></slot>
-        </div>
-
-        <div part="error-message">
-          <slot name="error-message"></slot>
-        </div>
-      </div>
-      <slot name="tooltip"></slot>
-    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new s.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,i.X)(v)},70297:(t,e,o)=>{o(37451);var a=o(90500);(0,o(6052).SF)("vaadin-text-field",a.k,{moduleId:"lumo-text-field-styles"}),o(34068)},39542:(t,e,o)=>{o(70297),o(34068)}}]);