add validateOnBlur

README.md

@@ -148,6 +148,8 @@ export class AppComponent {
      - "skipFirstScreen": automatically focus on the first input of each screen, except first screen
      autoFocus="skipFirstScreen"
 
+     validateOnBlur can be true in order to show input validation errors on blur, in addition to on submit. Default is false.
+
      errorTransformer is a function that receives an error object and returns a string. The returned string will be displayed to the user.
      NOTE: errorTransformer is not required. If not provided, the error object will be displayed as is.
      Example:

package.json

@@ -33,12 +33,12 @@
 		]
 	},
 	"dependencies": {
-		"@descope/access-key-management-widget": "0.1.74",
-		"@descope/audit-management-widget": "0.1.37",
-		"@descope/role-management-widget": "0.1.72",
-		"@descope/user-management-widget": "0.4.74",
-		"@descope/user-profile-widget": "0.0.40",
-		"@descope/web-component": "3.13.1",
+		"@descope/access-key-management-widget": "0.1.81",
+		"@descope/audit-management-widget": "0.1.44",
+		"@descope/role-management-widget": "0.1.79",
+		"@descope/user-management-widget": "0.4.81",
+		"@descope/user-profile-widget": "0.0.52",
+		"@descope/web-component": "3.15.0",
 		"tslib": "^2.3.0"
 	},
 	"optionalDependencies": {

projects/angular-sdk/src/lib/components/descope/descope.component.ts

@@ -32,6 +32,7 @@ export class DescopeComponent implements OnInit, OnChanges {
 	@Input() telemetryKey: string;
 	@Input() redirectUrl: string;
 	@Input() autoFocus: true | false | 'skipFirstScreen';
+	@Input() validateOnBlur: boolean;
 
 	@Input() debug: boolean;
 	@Input() errorTransformer: (error: { text: string; type: string }) => string;
@@ -122,6 +123,12 @@ export class DescopeComponent implements OnInit, OnChanges {
 		if (this.autoFocus) {
 			this.webComponent.setAttribute('auto-focus', this.autoFocus.toString());
 		}
+		if (this.validateOnBlur) {
+			this.webComponent.setAttribute(
+				'validate-on-blur',
+				this.validateOnBlur.toString()
+			);
+		}
 		if (this.debug) {
 			this.webComponent.setAttribute('debug', this.debug.toString());
 		}

projects/angular-sdk/src/lib/components/sign-in-flow/sign-in-flow.component.html

@@ -8,6 +8,7 @@
 	[telemetryKey]="telemetryKey"
 	[redirectUrl]="redirectUrl"
 	[autoFocus]="autoFocus"
+	[validateOnBlur]="validateOnBlur"
 	[debug]="debug"
 	[errorTransformer]="errorTransformer"
 	[client]="client"

projects/angular-sdk/src/lib/components/sign-in-flow/sign-in-flow.component.ts

@@ -18,6 +18,7 @@ export class SignInFlowComponent {
 	@Input() telemetryKey: string;
 	@Input() redirectUrl: string;
 	@Input() autoFocus: true | false | 'skipFirstScreen';
+	@Input() validateOnBlur: boolean;
 
 	@Input() debug: boolean;
 	@Input() errorTransformer: (error: { text: string; type: string }) => string;

projects/angular-sdk/src/lib/components/sign-up-flow/sign-up-flow.component.html

@@ -8,6 +8,7 @@
 	[telemetryKey]="telemetryKey"
 	[redirectUrl]="redirectUrl"
 	[autoFocus]="autoFocus"
+	[validateOnBlur]="validateOnBlur"
 	[debug]="debug"
 	[errorTransformer]="errorTransformer"
 	[client]="client"

projects/angular-sdk/src/lib/components/sign-up-flow/sign-up-flow.component.ts

@@ -18,6 +18,7 @@ export class SignUpFlowComponent {
 	@Input() telemetryKey: string;
 	@Input() redirectUrl: string;
 	@Input() autoFocus: true | false | 'skipFirstScreen';
+	@Input() validateOnBlur: boolean;
 
 	@Input() debug: boolean;
 	@Input() errorTransformer: (error: { text: string; type: string }) => string;

projects/angular-sdk/src/lib/components/sign-up-or-in-flow/sign-up-or-in-flow.component.html

@@ -8,6 +8,7 @@
 	[telemetryKey]="telemetryKey"
 	[redirectUrl]="redirectUrl"
 	[autoFocus]="autoFocus"
+	[validateOnBlur]="validateOnBlur"
 	[debug]="debug"
 	[errorTransformer]="errorTransformer"
 	[client]="client"

projects/angular-sdk/src/lib/components/sign-up-or-in-flow/sign-up-or-in-flow.component.ts

@@ -18,6 +18,7 @@ export class SignUpOrInFlowComponent {
 	@Input() telemetryKey: string;
 	@Input() redirectUrl: string;
 	@Input() autoFocus: true | false | 'skipFirstScreen';
+	@Input() validateOnBlur: boolean;
 
 	@Input() debug: boolean;
 	@Input() errorTransformer: (error: { text: string; type: string }) => string;