@descope/flow-components 2.0.460 → 2.0.462

package/dist/dts/Phone/Phone.d.ts

@@ -6,6 +6,8 @@ type Props = {
     'phone-input-placeholder'?: string;
     'country-input-placeholder'?: string;
     'restrict-countries'?: string;
+    'format-value'?: boolean;
+    'strict-validation'?: boolean;
 } & DescopeInputProps;
 declare const Phone: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default Phone;

package/dist/index.cjs.js

@@ -78390,6 +78390,19 @@ function requireIndex_cjs () {
 	      }
 	    };
 
+	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 {
 	  host: host$r,
 	  label: label$9,
@@ -81374,6 +81387,7 @@ descope-boolean-field-internal {
 	    },
 	  }),
 	  draggableMixin,
+	  inputOverrideValidConstraintsMixin,
 	  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
 	  componentNameValidationMixin,
 	  customMixin$b
@@ -83867,7 +83881,6 @@ descope-boolean-field-internal {
 	        includeAttrs: [
 	          'size',
 	          'bordered',
-	          'invalid',
 	          'minlength',
 	          'maxlength',
 	          'default-code',
@@ -83880,6 +83893,8 @@ descope-boolean-field-internal {
 	          'label',
 	          'label-type',
 	          'allow-alphanumeric-input',
+	          'format-value',
+	          'strict-validation',
 	        ],
 	      });
 	    }
@@ -84028,6 +84043,7 @@ descope-boolean-field-internal {
 	    },
 	  }),
 	  draggableMixin,
+	  inputOverrideValidConstraintsMixin,
 	  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
 	  customMixin$a
 	)(
@@ -84188,7 +84204,7 @@ descope-boolean-field-internal {
 	const componentName$H = getComponentName$1('phone-input-box-field');
 
 	const customMixin$9 = (superclass) =>
-	  class PhoneInputBoxFieldMixinClass extends superclass {
+	  class PhoneFieldInputBoxMixinClass extends superclass {
 	    static get CountryCodes() {
 	      return CountryCodes;
 	    }
@@ -84212,8 +84228,6 @@ descope-boolean-field-internal {
 	      forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
 	        includeAttrs: [
 	          'size',
-	          'bordered',
-	          'invalid',
 	          'minlength',
 	          'maxlength',
 	          'default-code',
@@ -84222,6 +84236,10 @@ descope-boolean-field-internal {
 	          'label',
 	          'label-type',
 	          'allow-alphanumeric-input',
+	          'restrict-countries',
+	          'format-value',
+	          'strict-validation',
+	          'data-errormessage-type-mismatch',
 	        ],
 	      });
 	    }
@@ -84237,7 +84255,8 @@ descope-boolean-field-internal {
 	  inputElement: inputElement$1,
 	  requiredIndicator: requiredIndicator$3,
 	  inputField: inputField$1,
-	  inputFieldInternal,
+	  internalComponent,
+	  internalComponentAfter,
 	  phoneInput,
 	  errorMessage: errorMessage$5,
 	  helperText: helperText$3,
@@ -84248,8 +84267,11 @@ descope-boolean-field-internal {
 	  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)' },
@@ -84272,14 +84294,6 @@ descope-boolean-field-internal {
 	      hostMinWidth: { ...host$g, property: 'min-width' },
 	      hostDirection: { ...host$g, 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' },
@@ -84304,10 +84318,18 @@ descope-boolean-field-internal {
 
 	      inputPlaceholderTextColor: { ...phoneInput, property: textVars$1.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' },
@@ -84326,6 +84348,7 @@ descope-boolean-field-internal {
 	    },
 	  }),
 	  draggableMixin,
+	  inputOverrideValidConstraintsMixin,
 	  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
 	  customMixin$9
 	)(
@@ -84357,7 +84380,6 @@ descope-boolean-field-internal {
     vaadin-text-field::part(input-field) {
       padding: 0;
       background: transparent;
-      overflow: hidden;
       -webkit-mask-image: none;
     }
     descope-phone-field-internal-input-box {
@@ -84368,14 +84390,20 @@ descope-boolean-field-internal {
     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$1.inputOutlineWidth}: 0;
       ${textVars$1.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%;
@@ -92624,6 +92652,8 @@ descope-boolean-field-internal {
 	      'restrict-countries',
 	      'default-code',
 	      'phone-minlength',
+	      'phone-format-value',
+	      'phone-strict-validation',
 	      'data-errormessage-value-missing-phone',
 	    ],
 	    inputBox: [
@@ -92631,6 +92661,8 @@ descope-boolean-field-internal {
 	      'restrict-countries',
 	      'default-code',
 	      'phone-minlength',
+	      'phone-format-value',
+	      'phone-strict-validation',
 	      'data-errormessage-value-missing-phone',
 	    ],
 	  },
@@ -92644,6 +92676,8 @@ descope-boolean-field-internal {
 	  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',
 	  },
 	};

package/dist/index.d.ts

@@ -261,6 +261,8 @@ type Props$x = {
     'phone-input-placeholder'?: string;
     'country-input-placeholder'?: string;
     'restrict-countries'?: string;
+    'format-value'?: boolean;
+    'strict-validation'?: boolean;
 } & DescopeInputProps;
 declare const Phone: React.ForwardRefExoticComponent<Omit<Props$x, "ref"> & React.RefAttributes<HTMLInputElement>>;
 

package/dist/types/src/Phone/Phone.d.ts

@@ -6,6 +6,8 @@ type Props = {
     'phone-input-placeholder'?: string;
     'country-input-placeholder'?: string;
     'restrict-countries'?: string;
+    'format-value'?: boolean;
+    'strict-validation'?: boolean;
 } & DescopeInputProps;
 declare const Phone: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default Phone;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/flow-components",
-	"version": "2.0.460",
+	"version": "2.0.462",
 	"description": "",
 	"main": "dist/index.cjs.js",
 	"module": "dist/index.esm.js",
@@ -66,7 +66,7 @@
 		"eslint": "8.57.1",
 		"eslint-config-airbnb": "^19.0.4",
 		"eslint-config-airbnb-typescript": "18.0.0",
-		"eslint-config-prettier": "10.0.1",
+		"eslint-config-prettier": "10.0.2",
 		"eslint-config-standard": "17.1.0",
 		"eslint-import-resolver-typescript": "3.8.3",
 		"eslint-plugin-import": "2.31.0",
@@ -104,7 +104,7 @@
 		"typescript": "^5.7.2"
 	},
 	"dependencies": {
-		"@descope/web-components-ui": "1.44.0"
+		"@descope/web-components-ui": "1.45.0"
 	},
 	"peerDependencies": {
 		"react": ">= 18"